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内 容 简 介 


本 书 由 浅 入 深 , 全 面 、 系 统 、 详 尽 地 介绍 了 HTML 5 相关 技术 及 其 在 移动 开发 领域 的 应 用 。 从 基本 原理 到 移 
动 页 面 优化 再 到 实战 应 用 ， 几 乎 涉及 HTMML 5 移动 开发 领域 的 绝 大 部 分 内 容 ， 是 一 本 集 理论 与 实战 的 综合 性 参 
考 书 。 

本 书 共 13 章 , 分 为 3 篇 。 第 1 篇 为 HTML 5 移动 特性 ， 内 容 包括 HTML 5 移动 开发 基础 、 移 动 表单 、 多 媒 
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了 移动 性 能 优化 的 一 些 技巧 。 第 2 篇 为 HTML 5 移动 框架 ， 主 要 介绍 jQueryMobile 和 SenchaTouch 这 两 个 当下 最 
流行 的 移动 框架 。 第 3 篇 为 HTML 5 移动 实战 , 详细 讲解 了 使 用 jQueryMobile 和 SenchaTouch 这 两 个 移动 框架 开 
发 移动 应 用 的 过 程 与 方法 。 

本 书 适 合 所 有 想 全 面 深入 学 习 HTML 5 移动 开发 技术 的 人 员 阅 读 , 尤其 适合 正在 应 用 HTML 5 做 移动 项 目 开 
发 的 人 员 阅 读 。 对 于 大 中 专 院 校 相关 专业 的 学 生 和 培训 机 构 的 学 员 ， 本 书 也 是 一 本 不 可 多 得 的 参考 书 。 
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前 言 


移动 互联 是 如 今 互联 网 最 热门 的 词汇 ， 其 代表 着 互联 网 未 来 的 趋势 。 这 一 切 似乎 是 昨天 
才 发 生 的 ， 但 放眼 望 去 ， 智 能 移动 终端 设备 已 经 是 人 们 上 日常 生活 中 不 可 或 缺 的 一 部 分 。 众 所 
周知 ， 智 能 移动 终端 设备 是 iOS 与 Android 的 天 下 ， 但 是 iOS 和 Android 开发 门槛 也 不 低 。 
随 着 HTML 5 技术 的 不 断 发 展 与 成 熟 ， 移 动 应 用 开发 领域 迎 来 了 崭新 的 时 代 ， 设 计 人 员 发 现 
以 前 需要 折腾 许久 的 项 目 ， 使 用 HTML 5 技术 则 简单 了 很 多 。 当 然 HTML 5 也 不 是 万 能 的 ， 
毕竟 iOS 和 Android 作为 原生 系统 有 着 不 可 替代 的 地 位 ， 如 果 将 HTML 5 的 前 端 技 术 发 挥 到 
极致 ， 也 会 让 移动 应 用 开发 更 上 一 层 楼 。 


关于 HTML 5 新 手 必须 知道 的 


@ HTML 5 不 仅仅 是 HTML 


早期 的 HTML 在 非常 长 的 时 间 里 被 人 们 认为 是 一 种 效率 低下 且 功 能 简单 的 网 页 开发 技 
术 ， 但 Web 技术 的 不 断 发 展 让 “网 页 ”和 “应 用 ”的 界限 越 来 越 模糊 ， 尤 其 是 HTML 5 的 横 
宝 出 世 ， 让 Web 变 得 更 加 强大 。 

HTML 5 标准 草案 最 初 发 布 于 2008 年 ， 而 后 被 各 大 浏览 器 厂商 跟 进 ， 包 括 Chrome、IE、 
Opera 和 Safari 等 。 它 发 展 迅 速 ， 很 快 成 为 了 开发 跨 平 台 和 跨 设 备 应 用 的 首选 客户 端 技术 。 
它 赋予 浏览 器 强大 的 能 力 。 例 如 ， 基 于 HTML 5 甚至 完全 可 以 抛弃 特定 的 操作 系统 平台 一 一 
Chromebook 就 是 这 方面 的 有 力 践 行者 。 

对 于 开发 人 员 来 讲 ，HTML 5 使 得 开发 应 用 程序 更 加 高 效 、 快 捷 、 简 单 ， 几 十 行 代码 便 
可 以 实现 过 去 几 百 甚至 上 千 行 代 码 才能 实现 的 功能 ， 省 时 又 省 力 。 


@ HTML35 易学 易 用 


HTML 5 增强 了 HTML 的 功能 ， 但 又 据 弃 了 XHTML 的 复杂 ,在 学 习 上 几乎 不 用 花费 太 
多 功夫 ， 在 使 用 上 也 尽量 贴近 人 们 的 常规 思维 。 

HTML 5 社区 和 相关 技术 发 展 也 十 分 迅速 。 在 移动 互联 网 的 助力 下 ，HTML 5 的 步子 迈 
得 更 大 了 。 一 方面 ， 对 程序 开发 不 了 解 的 设计 师 也 能 利用 HTML 5 和 CSS 3 技术 轻易 地 设计 
出 高 保 真 的 动态 应 用 原型 。 另 一 方面 ， 前 端 开发 工程 师 可 以 利用 HTML 5 提供 的 编程 接口 编 
写 出 强大 的 应 用 程序 。 


@@ 本 书 与 HTML5 


许多 人 在 学 习 HTML 5 的 时 候 不 明白 究 竞 什么 才 算 是 HTML 5， 也 经 常 搞 混 一 些 概念 和 
用 法 。 从 某 种 角度 来 说 ，HTML 5 是 一 系列 技术 标准 的 集合 ， 并 且 是 不 断 向 前 发 展 的 技术 。 
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为 了 帮助 那些 对 移动 开发 感 兴趣 的 读者 能 够 在 较 短 的 时 间 内 掌握 HTML 5 开发 技术 ， 笔 者 编 
写 了 本 书 。 

本 书 首先 从 HTML 5 的 历史 和 背景 入 手 ， 让 读者 理解 HTML 5 究竟 为 何 物 ; 然后 一 一 讲 
解 HTML 5 的 相关 技术 标准 及 其 在 移动 Web 开发 中 的 应 用 , 以 期 读者 能 够 掌握 HTML 5 移动 
Web 开发 的 核心 内 容 ; 最 后 讲解 HTML 5 移动 Web 开发 的 相关 工具 , 让 读者 可 以 快速 成 为 一 
位 高 效 而 专业 的 开发 者 。 


本 书 特色 


@ 内容 丰富 ， 窗 盖 面 广 


本 书 基本 涵盖 了 HTML 5 移动 Web 开发 的 所 有 常用 知识 点 及 开发 工具 。 无 论 是 初学 者 还 
是 有 一 定 基础 的 Web 开发 从 业 人 员 ， 通 过 阅读 本 书 都 将 获 益 菲 浅 。 


@ ”注重 实践 ,快速 上 手 


本 书 不 以 枯燥 乏味 的 理论 知识 作为 讲解 的 重点 ， 而 是 从 实践 出 发 ， 将 必要 的 理论 知识 和 
大 量 的 开发 实例 相 结合 ， 并 将 笔者 多 年 的 实际 项 目 开发 经 验 贯穿 于 全 书 的 讲解 中 ， 让 读者 可 
以 在 较 短 的 时 间 内 理解 和 掌握 所 学 的 知识 。 


@ 内 容 深入 、 专 业 


本 书 直 击 要 害 ， 先 从 标准 文档 入 手 ， 深 入 浅 出 地 讲解 了 Web 技术 的 原理 ; 然后 结合 移动 
Web 开发 的 相关 工具 ， 介 绍 实际 的 移动 Web 开发 ， 让 读者 学 有 所 用 。 最 专业 的 内 容 是 本 书 还 
详细 训 析 了 HTML 5 移动 页 面 优化 的 技巧 。 


@ 实例 丰富 ， 随 学 随 用 


本 书 提供 了 大 量 来 源 于 真实 Web 开发 项 目的 实例 ,并 给 出 丰富 的 程序 代码 及 注释 。 读 者 
通过 研读 这 些 例子 ， 不 仅 可 以 了 解 实际 开发 中 编写 代码 的 思路 和 技巧 ， 还 可 以 将 这 些 代码 直 
接 复 用 ， 以 提高 自己 的 开发 效率 。 


适合 阅读 本 书 的 读者 

@ 需要 全 面 学 习 移动 应 用 开发 技术 的 人 员 
HTML 5 初学 者 
有 一 定 基 础 的 Web 开发 人 员 
Web 前 端 开发 工程 师 
移动 应 用 开发 人 员 
混合 应 用 开发 人 员 
微 信 HTML 5 网 页 开发 人 员 
浏览 器 开发 人 员 


日” 大 中 专 院 校 的 学 生 
@ ”相关 培训 班 的 学 员 


下 载 资源 

为 了 方便 广大 读者 学 习 ， 我 们 还 提供 了 有 关 程 序 的 源 代码 ， 下 载 地 址 (注意 数字 和 字母 
大 小 写 ) 如 下 : 

http://pan.baidu.com/s/1gfsTf2b (密码 : 7cwm) 


如 果 下 载 有 问题 ， 请 电子 邮件 联系 booksaga@163.com， 邮 件 主题 为 “HTMLS 移动 开发 
入 门 源码 ”。 
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HTML 5 是 目前 移动 开发 中 非常 热门 的 一 项 技术 。 单 从 名 称 上 来 看 ，HTML 5 似乎 是 HTML 
技术 的 新 版 本 ， 其 实 没 那么 简单 ， 它 代表 着 目前 移动 开发 最 前 沿 的 技术 ， 是 未 来 移动 开发 的 方 
向 。 自 从 微 信 公 众 平台 的 开发 支持 HTML 5 后 ， 我 们 看 到 了 很 好 玩 、 有 趣 的 公众 号 信息 ， 从 侧 
面 促进 了 HTML 5 的 发 展 。 本 章 就 让 我 们 来 认识 一 下 HTML 和 HTML 5。 


1 .1 认识 HTML 


本 节 我 们 先 简 单 回顾 一 下 HTML 技术 的 内 容 ， 为 读者 学 习 HTML 5 技术 做 好 铺垫 。 


1.1.1 HTML 的 构成 


HTML (HyperText Mark-up Language， 超 文本 标记 语言 ， 或 称 为 超 文本 链接 标示 语言 ) 是 
构成 网 页 文档 的 主要 语言 。(X)HTML 指 扩展 超 文 本 标签 语言 (EXtensible HyperText Markup 
Language )， 是 更 严格 更 纯净 的 HTML 版 本 。(X)HTML 文件 的 结构 包括 头 部 (Head)、 主 体 

(Body) 两 大 部 分 ， 其 中 头 部 描述 浏览 器 所 需 的 信息 ， 而 主体 则 包含 所 要 说 明 的 具体 内 容 。 


一 XHTML 1.0 在 2000 年 1 月 26 日 成 为 W3C 的 推荐 标准 。 


【代码 1-1】 是 一 个 符合 COHTML 的 文件 。 


【代码 1-1】 
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其 中 ，DOCTYPE 和 xmlns 都 是 必需 的 。 经 常 使 用 的 编码 格式 有 UTF-8 和 GBK 两 种 ，UTF- 
8 是 针对 英文 网 页 设计 的 编码 格式 ，GBK 是 针对 中 文 网 页 设计 的 编码 格式 ， 在 没有 特殊 需求 的 
情况 下 统一 使 用 UTF-8 编码 ， 因 为 UTF-8 是 国际 编码 ， 通 用 性 好 ， 另 外 后 端 页面 (如 PHP、 
ASP 等 ) 一 般 都 使 用 UTF-8 编码 ， 所 以 使 用 UTF-8 与 其 通信 时 可 以 防止 出 现 乱码 和 不 必要 
的 麻烦 。 

CSS 一 般 位 于 COHTML 文件 的 头 部 ，JavaScript 一 般 位 于 (X)HTML 文件 的 末尾 ， 防 止 
JavaScript 文件 在 加 载 时 出 现 加 载 时 间 过 长 而 导致 页 面 出 现 空白 等 糟糕 的 用 户 体验 。 


画 COHTML 标签 全 部 小 写 。 


1.1.2 CSS 的 构成 


级 联 样式 表 (Cascading Style Sheet，CSS) 通常 又 称 为 “ 层 登 样式 表 (Style Sheet) ”， 是 
用 来 进行 网 页 风格 设计 的 。 比 如 ， 网 页 上 蓝 色 的 字 、 红 色 的 按钮 ， 这 些 都 是 风格 。 通 过 设立 样式 
表 ， 可 以 统一 控制 (XJHTML 中 各 标签 的 显示 属性 。CSS 样式 表 可 以 使 人 更 有 效 地 控制 网 页 外 
观 。【 代 码 1-2】 是 一 个 CSS 文件。 


【代码 1-2】 
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如 代码 所 示 ，CSS 文件 共 分 3 部 分 : 第 一 部 分 为 CSS 重 置 ， 第 二 部 分 为 公共 样式 ， 第 三 部 
分 为 模块 样式 〈 非 公共 )。 所 有 的 公共 样式 一 般 写 在 第 二 部 分 ， 位 于 模块 样式 之 上 ， 方 便 查找 。 
在 模块 CSS 部 分 ， 尽 量 写 出 样式 的 详细 路 径 ， 比 如 : 


01 #mty bbs myblock .searchbar .addblock ul li afmargin:.2em 0;padding- 
bottom: .2em} 


尽量 不 要 简写 成 : 


01 #mty bbs myblock .searchbar afmargin: .2em 0;padding-bottom:.2em} 


卫 下 | CSS 代码 建议 全 部 小 写 。 | 


1.1.3 ”JavaScript 的 构成 


JavaScript 就 是 一 个 被 埋没 很 久 的 编程 语言 ， 早 在 1995 年 被 布 兰 登 。 艾 奇 (Brendan Eich) 
设计 出 来 。 

最 初 网 景 (Netscape) 公司 将 其 脚本 语言 命名 为 LiveScript， 在 与 Sun 合作 之 后 将 其 改名 为 
JavaScript， 随 着 Netscape Navigator 2.0〈 见 图 1.1) 公布 于 世 ， 虽 然 想 要 师 出 名 门 的 效果 ， 但 是 
网 景 公 司 却 把 它 作为 给 非 程序 人 员 的 编程 语言 来 推广 和 宣传 ， 非 程序 开发 者 并 不 对 其 买账 ， 
JavaScript 由 此 被 埋没 长 达 十 年 之 久 。 不 过 JavaScript 的 确 具 备 了 很 多 优秀 的 特点 ， 近 几 年 的 发 
展 势头 越 来 越 好 ， 预 示 着 JavaScript 春天 般 的 前 景 。 




















图 1.1 浏览 器 Netscape Navigator 2.0 











月 JavaScript 编写 的 代码 需要 放 在 .html 文档 中 才能 被 浏览 器 执行 ， 有 两 种 方式 可 以 做 到 这 一 





1. 直接 内 嵌 JavaScript 代码 
第 一 种 方式 是 将 JavaScript 代码 放 到 文档 <head> 标 签 的 <scrip 亿 标签 中 ， 见 【代码 1-3】。 
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【代码 1-3】( 第 一 个 JavaScript 程序 hello world) 





将 上 面 的 代码 保存 到 HTML 文件 中 《在 记事 本 中 写作 ， 然 后 另存 为 扩展 名 是 html 的 文 
件 )， 用 任意 浏览 器 打开 ， 就 可 以 看 到 一 个 弹出 对 话 框 。 


2. 引用 JavaScript 文件 


第 二 种 方式 是 把 JavaScript 代码 存 为 一 个 扩展 名 为 js 的 独立 文件 中 。 以 前 的 做 法 是 在 文档 
<head> 里 用 <script> 标 签 的 src 属性 来 指向 该 文件 ， 见 【代码 1-4】。 


【代码 14】 





随 着 最 近 几 年 的 发 展 ， 目 前 业界 推荐 的 做 法 是 把 【代码 1-4】 中 的 <scrip 忆 放 到 HTML 文档 
最 后 ， 即 </body> 标 签 之 前 。 这 样 做 的 目的 是 使 浏览 器 更 快 地 加 载 页 面 并 展示 给 用 户 ， 从 而 提高 
用 户 体验 效果 。 


1 .2 认识 HTML 5 


本 节 我 们 开始 介绍 HTML 5 技术 的 内 容 ， 看 一 看 HTML 5 的 发 展 历史 及 其 与 XHTML 技术 
的 比较 。 
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1.2.1 HTML 5 的 发 展 与 理念 


W3C 是 一 个 纯粹 为 了 标准 化 而 存在 的 非 营利 性 组 织 ， 可 是 它 也 太 过 于 纯粹 而 忽略 了 各 大 浏 
览 器 厂商 的 利益 。 在 两 年 多 交涉 未 果 的 情况 下 ， 来 自 苹果 、Mozilla 基金 会 以 及 Opera 软件 等 的 
浏览 器 厂商 于 2004 年 成 立 了 WHATWG (Web Hypertext Application Technology Working Group， 
网 页 超 文 本 技术 工作 小 组 )。 不 难 理解 ， 他 们 意图 回 到 超 文本 标记 语言 HTML 上 来 。 此 时 的 苹果 
刚刚 成 立 Safari 浏览 器 团队 不 入， 可见 老 乔 当年 的 战略 眼光 。 

WHATWG 动作 很 快 ， 因 为 他 们 都 是 战斗 在 第 一 线 的 浏览 器 厂商 ， 成 立 后 不 久 就 提出 了 作为 
HTML 5 草案 前 身 的 Web Applications 1.0， 那 时 HTML 5 还 没有 被 正式 提出 。 

WHATWG 致力 于 Web 表单 和 应 用 程序 ， 而 W3C 专注 于 XHTML 2.0。 看 着 自己 被 冷落 的 
W3C 在 2006 年 10 月 决定 停止 XHTML 的 工作 并 与 WHATWG 合作 ， 双 方 决定 共同 创建 一 个 新 
版 本 的 HTML， 并 为 其 建立 一 些 规则 : 


@ ”新 特性 应 该 基于 HTML、CSS、DOM 以 及 JavaScript。 
减少 对 外 部 插件 的 需求 ( 比如 Flash ) 。 

更 优秀 的 错误 处 理 。 

更 多 取代 脚本 的 标记 。 

HTML 应 该 独立 于 设备 。 

开发 进程 应 对 公众 透明 。 


2007 年 ， 苹 果 、Mozilla 基金 会 以 及 Opera 软件 建议 W3C 接受 WHATWG 的 HTML 5， 正 
式 提 出 将 新 版 HTML 标准 定义 为 HTML 5。 于 是 HTML 5 就 正式 和 大 家 见面 了 。 

随 着 浏览 器 JavaScript 引擎 大 幅 提速 ， 人 们 对 HTML 5 的 预期 逐步 提高 ， 但 那 时 的 HTML 5 
并 没有 真正 给 人 们 更 多 的 惊喜 。 随 着 Flashplayer 被 曝 出 漏洞 、 安 全 、 性 能 之 类 的 负面 新 闻 ， 人 
们 对 HTML 5 的 关注 度 又 大 幅 升 高 。 

2007 年 到 2010 年 ， 众 人 在 对 HTML 5 失落 和 期 待 反复 交 蔡 的 日 子 中 度 过 。 

2010 年 1 月 ，YouTube 开始 提供 HTML 5 视频 播放 器 。 

2010 年 8 月 ，Google 联合 Arcade Fire 推出 了 一 个 HTML 5 互动 电影 : The Wildemess 
Downtown， 此 项 目 由 著名 作家 兼 导演 Chris Milk 创作 。 之 所 以 叫 作 互 动 电影 ， 是 因为 在 开始 时 
电影 会 问 你 小 时 候 家 住 在 哪里 ， 而 随后 的 电影 剧情 将 在 这 里 展开 。 电 影 使 用 Arcade Fire 专辑 

《The Suburbs》 中 的 We Used to Wait 作为 主题 音乐 。 发 布 一 年 后 ， 该 电影 在 夏 纳 广 告 大 奖 赛 中 
获得 了 网 络 组 别 的 奖项 。 

2010 年 4 月 ， 乔 帮主 发 表 公开 信 “Flash 之 我 见 ” 引发 Flash 和 HTML 5 阵营 之 间 的 空前 口 
水 仗 ， 也 刺激 了 浏览 器 厂商 。 

2012 年 1 月 10 日 在 拉 斯 维 加 斯 正在 举行 的 CES 大 会 上 ， 微 软 CEO 鲍 尔 默 宣布 了 基于 IE 9 
和 HTML 5 版 的 割 绳子 游戏 ， 这 是 由 微软 及 游戏 开发 商 ZeptoLab 共同 推出 的 ， 用 于 促进 正 9 的 
使 用 以 及 网 页 的 美化 。 

虽然 HTML 5 也 在 卖力 地 表现 ， 但 是 面 对 Flash 的 诸多 漏洞 、HTML 5 的 迟 迟 难产 ， 急 性 的 
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WHATWG 和 W3C 最 终 还 是 割 席 分 家 了 。 

2012 年 7 月 ， WHATWG 工作 人 员 在 公告 中 写 道 :“ 近 来 ，WHATWG 和 W3C 在 HTML 5 
标准 上 的 分 歧 越 来 越 大 。WHATWG 专注 于 发 展 标准 的 HTML 5 格式 及 相关 技术 ， 并 不 断 地 修正 
标准 中 的 错误 ， 而 W3C 则 想 根 据 自己 的 开发 进程 制作 出 “标准 版 ” HTML 5 标准 ， 颁 布 之 后 不 
容许 更 改 ， 错 误 也 无 法 修正 ， 所 以 我 们 决定 各 自 研发 。” 

这 样 的 巨变 就 像 王老吉 和 加 多 宝 一 样 ， 不 解释 ， 只 是 从 此 意味 着 将 会 有 两 个 版 本 的 HTML 
5 一 一 “标准 版 ”和 “living 版 〈 见 图 1.2)”。 


HTML 


Living Standard 一 Last Updated 20 July 2012 


图 1.2 WHATWG 维护 的 living 版 HTML5 


接着 W3C 提出 的 规划 是 : 到 2014 年 底 ，HTML 5 将 成 为 一 种 完整 的 成 品 标准 。W3C 还 计 
划 到 2016 年 底 发 布 后 续 版 本 HTML 5.1。 
任何 设计 都 有 设计 理念 ，HTML 5 也 有 一 些 : 


兼容 性 。 
实用 性 。 
互通 性 。 
@ 访问 性 。 


存在 即 合理 ， 历 史上 还 有 相当 多 的 老 版 HTML 文档 ， 而 且 不 能 抛弃 。 化 繁 为 简 是 HTML 5 
最 实用 的 改良 ， 无 插件 设计 让 互通 性 大 为 增强 ， 支 持 所 有 语种 让 地 球 村 访问 变 得 如 串门 一 般 简 单 。 


1.2.2 HTML5 和 XHTML 的 对 比 
(1) 文档 声明 简化 。 





(2) html 标签 上 不 需要 声明 命名 空间 。 
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(3) 字符 集 编码 声明 简化 。 





(4) style 和 script 标签 type 属性 简化 。 





(5) link 标签 连接 ICON 图 片 时 可 指定 尺寸 。 





除 此 以 外 ，HTML 5 没有 XHTML 那样 严格 要 求 标签 闭合 问题 。 对 XHTML 不 建议 使 用 的 b 
和 i 等 标签 进行 重 定义 ， 使 其 拥有 语义 特征 。 


@ bb 元 素 现在 描述 为 在 普通 文章 中 仅 从 文体 上 突出 不 包含 任何 额外 信息 的 一 段 主 要 性 文本 。 
@ 元 素 现在 描述 为 在 普通 文章 中 突出 不 同意 见 、 语 气 或 其 他 的 一 段 文 本 。 
@ 元 素 现在 描述 为 在 普通 文章 中 仅 从 文体 上 突出 有 语法 问题 或 是 中 文 专用 名 称 的 一 段 文 本 。 


.本 制作 一 个 简单 的 HTML 5 移动 APP 


本 节 我 们 开始 实际 操作 ， 编 写 一 个 简单 的 HTML 5 移动 APP， 让 读者 对 移动 APP 技术 有 一 
个 初步 的 了 解 。 
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1.3.1 开发 工具 的 选择 


在 编辑 器 的 选择 上 ，Web 前 端 开发 自由 度 是 非常 高 的 ， 即 使 是 文本 文档 编辑 器 也 可 以 作为 
Web 开发 的 工具 ， 但 是 为 了 提高 开发 效率 ， 还 是 要 选择 一 款 功 能 强大 且 时 化 的 编辑 器 。 笔 者 推 
荐 的 是 近年 来 席卷 前 端 界 的 Sublime Text， 一 款 独 具 个 性 的 高 级 编辑 器 ， 如 图 1.3 所 示 。 


a untited - Sublime Text Ce 
文 听 ( 芋 吉日 ” 运 深 S) 二 >) 豆 午 V)】 区 到 (G) 工具 Mm 大 各 (P 间 替 RN) 大 区 (HI) 








图 13 Sublime Text 编辑 器 


Sublime Text 支持 目前 主流 的 操作 系统 ， 如 Windows、Mac、Linux， 同 时 还 支持 32 和 64 
位 ， 支 持 各 种 流行 编程 语言 的 语法 高 亮 、 代 码 补 全 等 。 该 款 编辑 器 插件 相当 丰富 ， 同 时 版 本 更 新 
勤快 。 非 常 酷 的 一 点 是 编辑 器 右边 没有 滚动 条 ， 取 而 代 之 的 是 代码 缩 略图 。Sublime Text 是 一 款 
收费 软件 ， 不 过 目前 为 止 可 以 无 限期 地 使 用 。 








芹 却 Sublime Text 还 有 很 多 意 想 不 到 的 强大 功能 ， 读 者 可 以 自行 下 载体 验 ， 下 载 地 址 为 
http://www.sublimetext.cony/3。 











1.3.2 APP 代码 的 编写 


下 面 我 们 就 编写 一 个 简单 的 HTML 5 Hello APP 代码 ， 让 读者 直观 地 体会 一 下 HTML 5 移动 
应 用 的 魅力 ， 详 见 【 代 码 1-5】。 


【代码 1-5】 
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关于 【代码 1-5】 的 具体 分 析 如 下 : 
第 02 行 代码 定义 了 HTML 5 控件 <canvas>， 其 具体 含义 是 一 个 画布 ， 可 以 支持 设计 人 员 的 


自 定义 图 形 。 
第 03 一 15 行为 脚本 代码 ， 通 过 JavaScript 实现 在 <canvas> 控 件 上 的 图 形 操作 ， 有 具体 方法 的 含 


义 读者 可 以 参考 HTML 5 相关 文档 ， 本 章 就 不 做 深入 介绍 了 。 同 时 ， 第 04、06 和 08 行 代码 分 
别 使 用 console.log0 方 法 在 控制 台 输 出 调试 信息 。 


1.3.3 ”调试 运行 Hello APP 
调试 运行 HTML 5 APP 可 以 选择 专业 的 HTML 调试 工具 ， 还 可 以 直接 使 用 具有 调试 功能 的 
浏览 器 ， 辟 如 Google Chrome、Firefox 和 Opera 这 些 支持 HTML 5 标准 的 浏览 器 均 有 强大 的 调试 


功能 。 
下 面 我 们 在 Firefox 浏览 器 中 运行 【代码 1-5】， 页 面 效 果 如 图 1.4 所 示 。 然 后 ， 我 们 打开 调试 


器 界面 〈 快 捷 键 Ctrl+ShiftttJ)， 查 看 一 下 调试 信息 的 输出 ， 如 图 1.5 所 示 。 








亿 nle/WHykinghuthol © » 三 


Hego Worla! | 

cea Hello world! 
ES mnogoe0o= 0 8ai# 
3 请 可 Cy 





€ © fle//H/ngAuhor, . 


Hello Woridl 





Hello world! 





图 14 HelloAPP 运行 效果 图 1.5 Hello APP 调试 运行 效果 图 


从 图 1.5 中 可 以 看 到 ,【 代 码 1-5】 中 第 04、06 和 08 行 代码 使 用 console.log0 方 法 在 控制 台 
输出 的 调试 信息 全 部 成 功 显示 出 来 了 。 
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1 .4 HTML 5 的 移动 特色 


HTML 5 移动 开发 的 出 现 让 移动 平台 的 竞争 由 系统 平台 转向 了 浏览 器 之 间 ， 移 动 端的 正 、 
Chrome、Firefox、Safari、Opera 等 浏览 器 ， 谁 能 更 好 地 在 移动 端 支持 HTML 5， 谁 就 能 在 以 后 
的 移动 应 用 领域 占据 更 多 的 市 场 。 

下 面 列 举 HTML 5 适合 移动 应 用 开发 的 几 大 特性 : 


离线 缓存 为 HTML 5 开发 移动 应 用 提供 了 基础 。 
音频 视频 自由 嵌入 ， 多 媒体 形式 更 为 灵活 。 

地 理 定位 ， 随 时 随地 分 享 位 置 。 

Canvas 绘图 ， 提 升 移动 平台 的 绘图 能 力 。 

专 为 移动 平台 定制 的 表单 元 素 。 
丰富 的 交互 方式 支持 。 

使 用 成 本 上 的 优势 ， 更 低 的 开发 及 维护 成 本 。 
CSS 3 视觉 设计 师 的 辅助 利器 。 

实时 通信 人。 

档案 以 及 硬件 支持 。 

语意 化 。 

双 平 台 (iOS/Android ) 融合 的 APP 开发 方式 ， 提 高 工作 效率 。 


下 .与 ”本 章 小 结 


本 章 主要 介绍 了 使 用 HTML 5、CSS 3 和 JavaScript 来 编写 HTML 5 移动 应 用 的 入 门 方法 ， 
涉及 的 内 容 比 较 基 础 ， 相 关 代码 的 难度 不 大 ， 希 望 能 够 抛砖引玉 ， 提 高 读者 对 HTML 5 移动 应 
用 开发 的 兴趣 。 
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表单 一 直 以 来 都 是 HTML 中 非常 重要 的 部 分 ， 主 要 用 于 采集 和 提交 用 户 输入 的 信息 。 在 
HTML 5 出 现 之 前 ， 开 发 者 需要 通过 大 量 的 JavaScript 代码 进行 表单 的 验证 和 效果 模拟 ， 在 开发 
和 维护 上 都 需要 耗费 大 量 的 精力 。HTML 5 出 现 之 后 ， 提 供 了 全 新 的 表单 类 型 和 属性 ， 甚 至 不 需 
要 借助 JavaScript 就 能 实现 与 之 相同 的 功能 。 本 章 的 示例 从 现实 的 表单 使 用 场景 出 发 ， 让 读者 可 
以 充分 了 解 到 如 何 让 表单 元 素 新 类 型 与 新 属性 同 JavaScript 完美 结合 ， 同 时 还 能 了 解 如 何 解决 低 
版 本 浏览 器 的 兼容 方案 。 














丰富 的 表单 属性 


表单 中 使 用 最 多 的 莫 过 于 input 元 素 ， 主 要 用 于 填写 用 户 信息 ， 传 统 的 input 元 素 有 10 种 类 
型 ， 如 表 2-1 所 示 。 


表 2-1 传统 的 input 元 素 类 型 










可 点 击 的 按钮 




















复 选 框 

输入 字段 和 “浏览 器 ”按钮 ， 用 于 文件 上 传 
hidden 隐藏 的 输入 字段 
image 图 像 形式 的 提交 按钮 
password 密码 输入 框 ， 输 入 的 字符 被 掩 码 





单 选 按钮 
reset 重 置 按钮 ， 清 空 表单 内 的 所 有 数据 
提交 按钮 ， 提 交 表 单数 据 至 远程 服务 器 
text 文本 输入 框 


HTML 5 在 此 基础 上 做 了 进一步 的 加 强 ， 添 加 了 另外 13 种 类 型 ， 如 表 2-2 所 示 。 
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表 2-2 HTML 5 新 增 input 元 素 类 型 





























类 型 名 称 说 明 

date 带 日 历 控件 的 日 期 字段 
datetime 带 日 历 和 时 间 控 件 的 日 期 字段 
datetime -local 带 日 历 和 事件 控件 的 日 期 字段 
email 电子 邮箱 文本 字段 

month 带 日 历 控件 的 日 期 字段 的 月 份 
number 带 数字 控件 的 数字 字段 

Tange 带 滑动 控件 的 数字 字段 

time 带 时 间 控 件 的 日 期 字段 的 时 、 分 、 秒 
url URL 文本 字段 

week 带 日 历 控件 的 日 期 字段 周 
color 拾 色 器 

search 用 于 搜索 的 文本 字段 

tel 用 于 电话 号 码 的 文本 字段 








为 了 便于 读者 观察 学 习 ， 图 2.1 呈现 了 各 种 input 元 素 新 类 型 在 网 页 中 的 预览 效果 。 


Date: | 年 /月 /日 可 时 
Datetime: 


Datetime-local: | 年 /月 /日 一 :一 汉 v 


Email: 


Week: | 一 年 第 一 局 汉 v 


Color WW 
Search: 
Tel: 


图 2.1 HTML 5 新 增 input 元 素 类 型 的 预览 效果 








访 目前 不 是 所 有 浏览 器 都 支持 上 述 input 新 类 型 ， 读 者 可 以 使 用 Chrome 最 新 版 进行 浏览 。 











2 .2 移动 Web 表单 的 input 类 型 


2.2.1 search 类 型 文本 
使 用 下 面 的 代码 就 可 以 创建 一 个 search 类 型 的 <input> 标 签 。 


要 
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当 value 为 空 或 没有 这 个 属性 时 placeholder 设置 的 内 容 才 会 被 显示 。 


2.2 是 search 类 型 <input> 标 签 显示 的 效果 。 


D filey//Hy/King Author, @ | 要 让 要 




















图 2.2 Search 类 型 <input> 标 签 


2.2.2 email 类 型 文本 
用 下 面 的 代码 就 可 以 创建 一 个 email 类 型 的 <input> 标 签 。 


这 样 最 简单 地 使 用 时 ， 只 是 在 输入 的 时 候 验 证 是 否 符合 最 简单 的 email 格式 ， 在 设置 默认 值 
的 时 候 依然 用 value 属性 。 


当 value 为 空 或 没有 这 个 属性 时 placeholder 设置 的 内 容 才 会 被 显示 。 


图 2.3 是 placeholder 显示 的 效果 ， 灰 灰 的 字体 颜色 。 这 里 需要 注意 的 是 placeholder 默认 的 
不 是 灰色 ， 而 是 <input> 标 签 的 color 样式 设置 的 颜色 60% 透 明度 的 效果 ， 所 以 如 果 color 不 是 默 
认 的 黑色 而 是 red 红色 ， 那 么 placeholder 显示 的 则 是 淡 红 色 。 





人 4 











设置 placeholder 


2.3 placeholder 在 FireFox 下 的 效果 


作为 一 般 的 提示 这 是 很 有 用 的 一 个 属性 ， 另 外 还 有 一 个 设置 光标 的 属性 也 非常 有 用 ， 即 
autofocus。 
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<input type="email" autofocus="autofocus"/> 


当 同 时 设置 了 placeholder 和 autofocus 时 ，placeholder 会 被 显示 ， 光 标 也 会 在 输入 框 中 闪 
烁 ， 即 获得 焦点 。 设 置 了 value 值 时 ， 光 标 会 出 现在 第 一 个 字符 前 面 而 不 是 在 最 后 面 。 如 果 一 个 
页 面 有 多 个 <input> 标 签 设置 了 autofocus， 那 么 在 不 同 浏览 器 下 光标 的 位 置 是 不 同 的 ， 比 如 
Firefox 会 将 光标 定位 在 第 一 个 设置 元 素 上 ， 而 Chrome 则 定位 在 最 后 一 个 设置 元 素 上 。 
email 一 般 作为 重要 资料 通常 是 必 填 项 目 ， 这 时 required 属性 就 派 上 用 场 了 。required 属性 会 
告诉 表单 在 提交 时 检查 元 素 是 否 填 写 。 
<input type="email" required="required"/> 
除了 必 填 以 外 ， 有 时 还 需要 更 加 复杂 的 验证 ， 比 如 email 的 格式 和 长 度 ， 甚 至 仅 限 某 个 域名 
等 ， 这 时 就 要 使 用 pattern 属性 了 。 
<input type="email" pattern=" .+z3f\ .meS"/> 
上 面 的 代码 用 pattern 属性 限制 只 能 用 Zz3f.me 结尾 的 email 地 址 。pattem 实质 就 是 执行 正则 
表达 式 。 


2.2.3 number 类 型 文本 
Chrome 支持 的 number 类 型 文本 的 效果 如 图 2.4 所 示 。 


D file:///D:/JsBOY? 三 





图 2.4 number 类 型 <input> 标 签 
number 类 型 有 几 个 专 有 的 属性 ， 如 表 2-3 所 示 。 
表 2-3 number 类 型 特有 属性 及 其 描述 
属性 描述 


| 


| 
规定 合法 的 数字 间隔 (车 step-"3"， 则 合法 的 数 就 是 3、0、3、6 等 ) 


同 其 他 <input> 标 签 一 样 ， 使 用 number 类 型 也 是 非常 简单 的 。 
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上 面 的 代码 设置 了 一 个 初始 值 为 50、 每 次 增 减 为 5、 最 大 不 超过 100、 最 小 不 低 于 10 的 
number 类 型 文本 。 


2.2.4 range 类 型 文本 
使 用 下 面 的 代码 就 可 以 创建 一 个 range 类 型 的 <input> 标 签 。 
<input typer'ranger 


range 类 型 <inpuf> 标 签 通常 包括 “min” 和 “max ”两 个 属性 ， 分 别 用 于 设 定 区 间 的 最 小 和 
最 大 值 ， 具 体 如 下 : 


| <input types'range" names'points' min maxio /> 
2.5 是 range 类 型 <input> 标 签 显示 的 效果 。 





2.2.5 tel 类 型 文本 
使 用 下 面 的 代码 就 可 以 创建 一 个 tel 类 型 的 <inpu 忆 标签 。 
ETE 
tel 类 型 通常 用 于 定义 电话 格式 的 <inpu 忆 标签 ， 具 体 如 下 : 


| 
2.6 是 tel 类 型 <input> 标 签 显示 的 效果 。 





HTMLS x 
€ © file///H/KingAuthor) C 2 | 王 
Mobile- 

















2.6 tel 类 型 <inpuP 标 签 
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2.2.6 url 类 型 文本 
使 用 url 类 型 的 <inpu 尼 标签 和 使 用 email 类 型 差不多 。 
<input type=”url” /> 


同样 支持 email 类 型 的 属性 。 只 是 url 类 型 的 基本 验证 需要 有 protocol 协议 头 ， 比 如 http:、 
file:、ftp: 等 。 

不 同 的 浏览 器 对 验证 的 执行 效果 和 提示 效果 不 一 样 ， 比 如 图 2.7，Firefox 会 在 失去 焦点 时 描 
红 边 框 提示 ， 而 Chrome 则 没有 类 似 的 行为 ， 只 在 提交 时 提示 。 








文件 中 
[Ems row D file:///D:/JsBooK/08/ 宫 三 
€ file:///D./TsB00K/08/08. htnl 加 














图 2.7 浏览 器 在 提示 时 的 不 同 策略 
每 家 浏览 器 的 提示 风格 也 不 相同 ， 如 图 2.8 所 示 。 


文件 下 编辑 EF) 查看 W) 历史 G) 书签 @) 工具 人) 
| Dims Forns + 


所 国 file//1D:/TSBoooa/oa hl 加”C| 时 加 


时 IFRL， 阿 | 景 基本 
We 一 | 最 基本 柯 请 入 入 网 址 。 


| w+ me | 














2.8 浏览 器 不 同 的 提示 效果 


2 .3 HTML 5 表单 新 属性 


2.3.1 autocomplete 属性 


autocomplete 属性 规定 form 或 input 标签 应 该 拥有 自动 完成 功能 。 当 用 户 在 自动 完成 标签 中 
开始 输入 时 ， 浏 览 器 应 该 在 该 标签 中 显示 填写 的 选项 。autocomplete 属性 适用 于 <form> 标 签 ， 具 
有 text、search、url、telephone、email、password、datepickers、range 及 color 类 型 的 <inpu 人 > 标签 。 
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下 面 我 们 看 一 下 实际 应 用 。 
【代码 2-1】 





图 2.9 是 autocomplete 属性 的 页 面 效果 图 。 





2.9 autocomplete 属性 效果 


2.3.2 autofocus 属性 


autofocus 属性 规定 在 页 面 加 载 时 标签 自动 获得 焦点 ， 适 用 于 所 有 <input> 标 签 的 类 型 。 下 面 
我 们 看 一 下 实际 应 用 。 


【代码 2-2】 





2.10 是 autofocus 属性 的 页 面 效 果 图 。 





€ © file///H/KingAuthor) © Ee 





First name- 
Last name- 


E-mait || 

















图 2.10 autofocus 属性 效果 


a 
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从 图 2.10 中 可 以 看 到 ， 页 面 初始 化 后 焦点 自动 出 现在 email 标签 内 。 


2.4 匠 硬 一 和 娃 一 个 HTML 5 版 的 APP 注册 页 面 


本 例 是 一 个 常见 的 用 户 注册 页 面 ， 表 单 由 3 个 文本 框 组 成 ， 类 型 分 别 为 email、text 和 
password。 进 入 页 面 后 ， 鼠 标 会 自动 聚焦 到 “电子 邮箱 ”文本 框 ， 同 时 文本 框 的 边框 会 产生 红色 
渐变 的 效果 。 点 击 “ 了 昵称 ”文本 框 ,“ 电 子 邮件 ”文本 框 的 边框 红色 消失 ， 此 时 “昵称 ”文本 框 
的 边框 出 现 红色 渐变 效果 ,“ 密 码 ”文本 框 的 效果 相同 。 

使 用 支持 HTML 5 表单 新 特性 的 浏览 器 Google Chrome 打开 网 页 文件 ， 运 行 效果 如 图 2.11 
所 示 。 打 开 网 页 的 同时 ,“ 电 子 邮 箱 ” 文 本 框 会 渐变 为 红色 ， 运 行 效果 如 图 2.12 所 示 。 点 击 “ 注 
册 ” 按 钮 ， 进 行 表单 验证 ， 运 行 效 果 如 图 2.13 所 示 。 

本 例 中 采用 了 大 量 的 CSS 3 特效 ， 包 括 刚 进入 页 面 聚 焦 渐 变 的 动画 、 表 单 背景 色 的 颜色 渐 
变 、 文 本 框 的 阴影 等 。 通 过 本 示例 可 以 了 解 如 何 运 用 CSS 3 制作 一 个 简单 的 注册 页 面 。 

















人 上 
抢 
注 册 贡 
图 2.11 HTML 5 版 的 注册 页 面 图 2.12 “电子 邮件 ”文本 框 的 边框 变 红 





加 请 填写 此 字段 。 








图 2.13 ” 点击“ 注册” 按钮 
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2.4.1 代码 设计 
利用 编辑 器 编辑 如 下 代码 ， 并 保存 为 “2-3. 创 建 一 个 HTML 5 版 的 注册 页 面 html” 文件 。 
【代码 23】 
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代码 中 可 以 看 到 很 多 样式 前 带 有 -webkit、-moz、-o、-ms 的 前 级 ， 注 释 中 给 出 了 浏览 器 的 支 
持 情况 。 想 更 多 地 了 解 各 浏览 器 前 级 ， 可 以 参考 网 址 http://css3please.com。 


2.4.2 ”代码 分 析 


本 示例 侧重 从 CSS 3 出 发 ， 介 绍 如 何 构 建 一 个 注册 页 面 ， 下 面 讲解 其 中 用 到 的 CSS 3 
技巧 。 

【代码 2-3】 中 第 19~31 行 、126~132 行 、149~155 行使 用 了 CSS 3 Gradient (渐变 )。 渐 变 分 
为 线性 渐变 〈Linear Gradients) 和 径 向 渐变 〈Radial Gradients )。 这 里 使 用 了 线性 渐变 ，WebKit 
内 核 的 浏览 器 语法 如 下 。 
-vebkit-gradient (<type>, [<point> 11 <angle>,]? <stop>, <stop> [, <stop>]* ) 

在 WebKit 下 Gradient 使 用 的 语法 如 图 2.14 所 示 。 
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类 型 省 让 点 终止 颜色 
-webkit-gradient (linear, left top, left bottom, from(#fff), to(#eee)) 


图 2.14 WebKit 下 Gradient 使 用 


第 1 个 参数 表示 渐变 类 型 ， 渐 变 类 型 分 为 linear (线性 渐变 ) 和 radial ( 径 向 渐变 ) 两 种 。 第 
2 个 和 第 3 个 参数 分 别 表示 渐变 的 起 点 和 终点 ， 可 以 用 坐标 形式 或 方位 值 ， 比 如 right top (右上 
角 ) 和 right bottom ( 右 下 角 )， 也 可 以 使 用 角度 ， 比 如 red 10%。 第 4 个 和 第 5 个 参数 表示 起 始 
和 终止 的 渐变 颜色 。 

再 看 标准 浏览 器 的 Gradient 语法 : 





标准 浏览 器 下 Gradient 的 使 用 如 图 2.15 所 示 。 


起 始 基色 
Sg 
linear-gradient (top, #fff, fece) 
浙 变 起 点 了 7 下 终止 着 色 


2.15 ”标准 浏览 器 下 Gradient 的 使 用 


标准 浏览 器 下 Gradient 的 渐变 类 型 不 在 第 1 个 参数 上 ， 而 是 写 在 样式 名 称 上 。 第 1 个 参数 表 
示 渐 变 的 起 点 ， 可 以 使 用 方位 值 或 者 角度 值 ， 第 2 个 和 第 3 个 参数 和 WebKit 相同 。 








二 想 了 解 更 多 Gradient 的 使 用 ， 可 以 参考 网 址 http://css-tricks.com/examples/CSS 3Gradient/。 | 





代码 32~38 行 、79~81 行 、108~110 行 、158~160 行使 用 了 CSS 3 的 border-radius， 中 文 意思 
是 “ 圆 角 ”， 语 法 如 下 : 





其 中 ，length 是 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 可 以 使 用 em、ex、pt、px、 百 分 比 
等 ， 不 可 为 负 值 。 圆 角 还 有 其 他 一 些 相关 属性 ， 比 如 border-top-right-radius、border-bottom-right- 
radius、border-bottom-left-radius、border-top-left-radius 。 

代码 40~47 行 、62~64 行 、82~85 行 、100~102 行 、165~168 行使 用 了 CSS 3 的 box- 
shadow， 语 法 如 下 : 





参数 说 明 : 阴影 水 平 偏 移 值 〈( 可 取 正 负 值 )， 阴 影 垂直 偏 移 值 (可 取 正 负 值 )， 阴 影 边 框 ， 阴 
影 模糊 值 ， 阴 影 颜色 。 

例子 中 使 用 的 盒 阴 影 效 果 属 于 盒 外 阴影 ， 除 此 之 外 还 有 盒 内 阴影 ， 使 用 时 可 增加 一 个 
inset， 代 码 如 下 : 


DN 
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如 果 还 想 了 解 更 多 的 盒 阴 影 ， 可 以 去 http://www.css3maker.com/box-shadow.html 动态 感受 下 
box-shadow 的 强大 效果 。 


2 .5 本 章 小 结 


本 章 主 要 介绍 了 HTML 5 的 一 些 移动 特性 ， 包 括 新 的 表单 类 型 、 表 单 属性 。 本 章 最 后 通过 
一 个 实际 范例 介绍 了 如 何 使 用 HTML 5 移动 特性 ， 同 时 还 介绍 了 CSS 3 的 一 些 技术 。 实 际 上 
HMTL 5 并 不 是 一 项 简单 的 技术 ， 而 是 对 HTML、CSS 和 JavaScript 技术 的 全 新 应 用 。 
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音频 视频 作为 HTML 5 的 最 大 亮点 之 一 ， 解 决 了 常年 以 来 使 用 浏览 器 观看 视频 和 音频 都 不 
得 不 安装 Flash 的 窖 境 。 随 着 HTML 5 的 发 展 、 各 大 浏览 器 厂商 对 音频 视频 的 支持 ， 加 上 苹果 的 
iOS 系统 禁止 使 用 Flash， 使 得 HTML 5 的 音频 视频 在 这 几 年 内 得 到 了 飞速 的 发 展 ， 各 大 主流 视 
频 网 站 纷纷 推出 了 完全 使 用 HTML 5 打造 的 视频 编辑 器 。 使 用 HTML 5 的 音频 和 视频 非常 简 
单 ， 只 需要 用 到 两 个 标签 audio 和 video， 本 章 将 介绍 这 两 个 标签 的 使 用 和 注意 事项 。 





音频 视频 


本 节 我 们 先 介 绍 一 下 音频 与 视频 的 基本 知识 、HTML 5 技术 下 使 用 音频 (<audio> 标 签 ) 与 
视频 (<video> 标 签 ) 的 基本 方法 ， 让 读者 对 HTML 5 的 音频 与 视频 技术 有 一 个 初步 的 了 解 。 


3.1.1 音频 视频 的 格式 


MP4 格式 在 日 常生 活 中 已 经 随处 可 见 ， 但 是 大 家 对 WebM 和 Ogv 应 该 还 有 点 陌生 。WebM 
是 一 个 开放 、 免 费 的 媒体 文件 格式 ， 最 早 由 谷歌 提出 ， 该 格式 容器 中 包括 了 VP8 和 Ogg Vorbis 
音 轨 。WebM 格式 效率 非常 高 ， 可 以 在 平板 电脑 和 其 他 一 些 手持 设备 上 流畅 地 使 用 。Ogv 即 带 有 
Thedora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 ， 该 格式 文件 带 有 不 确定 的 版 权 问题 ， 可 能 在 未 
来 的 浏览 器 中 被 慢 慢 淘 汰 。 

各 种 格式 的 优 缺 点 不 一 ， 如 WebM 格式 ， 依 赖 于 Google 和 YouTube 的 推广 ， 并 且 在 硬件 上 
有 良好 的 支持 ， 但 是 由 于 涉及 MPEG LA 的 专利 案件 ， 并 且 在 iOS 设备 上 得 不 到 支持 ， 虽 然 传统 
视频 和 音频 编码 技术 经 历 多 年 的 发 展 ， 并 且 相当 稳定 ， 但 对 于 浏览 器 中 原生 支持 视频 和 音频 还 非 
常年 轻 ， 仍 然 会 遇 到 重重 阻碍 ， 不 过 规范 和 标准 日 益 完善 ， 如 果 读 者 及 早 地 在 视频 和 音频 上 做 好 
技术 准备 ， 在 未 来 会 得 到 加 倍 的 回报 。 














Ee 





3.1.2 ”使 用 video/audio 元 素 


HTML 5 除了 提供 audio 和 video 元 素 播放 音频 和 视频 资源 外 ， 同 时 还 配套 提供 了 一 系列 的 
方法 、 属 性 和 事件 ， 这 些 方法 、 属 性 和 事件 允许 使 用 JavaScript 操作 audio 和 video 对 象 。 
audio 和 video 对 象 均 提 供 了 一 些 类 似 的 方法 ， 如 表 3-1 所 示 。 
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表 3-1 audio 和 video 对 象 方法 











方法 名 说 明 
load 重新 加 载 音频 或 视频 内 容 
pla 播放 音频 或 视频 
i 暂停 音频 或 视频 
向 音频 或 视频 沙 加 字幕 
检测 浏览 器 是 否 支持 音频 或 视频 格式 
下 面 通过 一 个 简单 的 视频 播放 示例 介绍 部 分 API 的 使 用 。 
【代码 3-1] 





该 示例 是 一 个 最 基本 的 使 用 JavaScript 操作 视频 元 素 的 例子 ， 其 中 用 到 了 2 个 关键 方法 play 
和 pause。audio 和 video 元 素 除 了 新 增 许多 新 的 方法 外 ， 同 时 还 增加 了 诸多 属性 ， 如 表 3-2 所 示 。 
表 3-2 audio 和 video 元 素 属 性 
元 素 名 


表示 视频 或 音频 加 载 完毕 后 自动 播放 


表示 显示 元 素 浏览 器 默认 控件 条 
| height ”| 视频 或 音频 元 素 的 高 


width 视频 或 音频 元 素 的 宽 








[bw 表示 视频 或 音频 是 耕 循 环 播放 | 
eload 。 | 表示 视频 或 音频 在 页 面 加 载 时 自动 进行 加 载 ， 并 预 各 播放 | 
to 表示 视频 或 音频 的 地 址 URL | 
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在 实际 的 开发 中 ， 使 用 JavaScript 操作 视频 音频 元 素 往往 会 遇 到 很 多 浏览 器 的 差异 ， 这 些 问 
题 在 本 章 对 应 的 示例 章节 会 给 出 相应 的 解决 方案 ， 同 时 读者 可 以 使 用 市 面目 前 比较 成 熟 的 第 三 方 
视频 音频 类 库 解决 兼容 问题 ， 如 目前 比较 流行 的 基于 HTML 5 的 类 库 videojs， 官 网 地 址 
http://www.videojs.com/。 


3.1.3 ”音频 视频 的 通信 


音 视频 的 实时 通信 和 即 HTML 5 的 WebRTC 技术 ， 是 Web Real-Time Communication 的 缩写 ， 
该 技术 主要 用 于 支持 浏览 器 进行 实时 的 语音 对 话 和 视频 通信 。 

在 2011 年 之 前 ， 浏 览 器 实现 语音 对 话 和 视频 通信 技术 需要 通过 安装 插件 或 者 客户 端 等 一 些 
技术 实现 ， 不 论 对 于 用 户 还 是 开发 人 员 都 是 一 个 烦琐 和 复杂 的 过 程 ， 并 且 还 受到 各 种 专利 的 影 
响 。 谷 歌 公 司 在 2010 年 收购 了 Global IP Solutions 公司 从 而 获得 了 WebRTC 技术 ， 在 2011 年 ， 
按照 BSD 协议 把 该 技术 开源 ， 同 年 W3C 将 WebRTC 技术 纳入 HTML 5 成 为 标准 的 一 部 分 。 最 
新 Android 系统 上 的 Chrome 版 本 也 加 入 了 WebRTC 技术 。 

WebRTC 技术 可 以 让 Web 开发 者 轻松 地 基于 浏览 器 开发 出 丰富 的 实时 媒体 应 用 ， 帮 助 网 页 
应 用 开发 语音 通话 、 视 频 聊天 、P2P 文件 分 享 等 功能 ， 而 不 需要 安装 任何 插件 ， 同 时 开发 者 也 不 
需要 关心 多 媒体 的 数字 信号 处 理 过 程 ， 只 需要 使 用 JavaScript 即 可 实现 。 图 3.1 为 WebRTC 的 技 
术 架 构图 。 








ee An biowe naters SUS Owerceatie by bows na 


3.1 WebRTC 的 技术 架构 图 
WebRTC 技术 由 以 下 3 部 分 组 成 。 
@ ”MediaStream: 本 地 的 音频 视频 流 或 来 自 远 端 浏览 器 的 音频 视频 流 。 
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@ PeerConnection: 执行 音频 视频 调用 ， 支 持 加 密 和 带宽 控制 。 
@ 。 DataChannel: 采用 点 对 点 传输 ， 传 输 常规 数据 。 


下 面 通过 一 个 示例 演示 如 何 使 用 浏览 器 WebRTC， 代 码 如 下 : 
【代码 3-2】 





将 上 述 代码 保存 至 后 绷 为 html 的 文件 ， 并 放置 于 Web 服务 器 ， 如 IIS、Apache、Nginx 等 。 
使 用 最 新 Chrome 浏览 器 打开 页 面 地 址 ， 浏 览 器 会 提示 是 和 否 启用 摄像 头 和 麦克 风 ， 如 图 3.2 
所 示 。 


DD localhest/WebRTCDeme ht x 
€ > C D1ocalhost/YebrTCDeno. hta 六 @ 











| 上 @( http://1ocalhost/ 想 要 保 用 您 的 摄像 头 和 麦克 风 。 了 解 详情 





3.2 浏览 器 提示 是 否 启用 摄像 头 和 麦 克 风 


点 击 浏览 器 提示 条 中 的 “允许 ”按钮 ， 此 时 浏览 器 内 出 现 一 个 宽 640 像素 、 高 480 像素 的 视 
频 窗口 ， 显 示 内 容 为 用 户 摄像 头 拍摄 视频 。 
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随 着 WebRTC 的 发 展 和 各 大 技术 巨头 的 支持 ， 虽 然 标准 尚未 完全 成 熟 ， 但 足以 给 开发 者 代 
码 前 所 未 有 的 惊喜 ，Web 开发 人 员 可 以 完全 基于 浏览 器 开发 音频 视频 实时 在 线 应 用 。 目 前 ， 已 
经 出 现 了 一 批 颇具 实力 的 类 库 ， 如 webRTC.io 和 WebRTC-Experiment 等 ， 用 户 可 以 前 往 项 目地 
址 学 习 使 用 ， 地 址 分 别 为 https://github.com/webRTC/webRTC.io 和 https://github.com/muaz- 


khan/WebRTC-Experiment 。 


本 | BSD 是 Berkeley Software Distribution 的 缩写 ， 中 文 意思 为 伯克利 软件 发 行 版 ， 是 一 整套 软件 
发 行 版 的 统称 ， 是 自由 软件 中 使 用 最 广泛 的 许可 证 之 一 。BSD 的 最 初 所 有 者 是 加 州 大 学 鞋 
事 会 。 该 协议 可 以 自由 地 使 用 并 修改 源 代 码 ， 也 可 以 将 修改 后 的 代码 作为 开源 或 者 专利 软件 


再 发 布 。 






可 .2 范例 一 制作 音乐 播放 器 APP 


本 例 将 使 用 HTML 5 的 新 元 素 audio 播放 音频 。 这 里 给 出 了 一 个 实现 简单 在 线 音频 播放 器 的 
场景 ， 用 户 可 以 点 击 播放 列表 进行 音乐 切换 。 

使 用 Chrome 浏览 器 打开 网 页 文件 ， 运 行 结果 如 图 3.3 所 示 。 点 击 列表 中 第 3 首 歌曲 
“LightMusic.mp3”， 然 后 点 击 左下 角 的 播放 按钮 ， 运 行 效 果 如 图 3.4 所 示 。 





MaidWwithTheFlaxenHair. np3 JiaidyithTheFlaxenHair np3 


Lightlustic. ap3 iahtusicm 


ne 一, 一 


图 3.3 使 用 Chrome 打开 网 页 文件 图 34 播放 “LightMusicmp3” 
利用 编辑 器 打开 “3-3. 做 一 个 自己 的 在 线 音频 播放 器 .html” 文 件 ， 代 码 如 下 : 

















【代码 3-3】 
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代码 第 45 行 是 播放 器 的 核心 ， 使 用 HTML 5 新 元 素 audio。audio 元 素 有 多 种 属性 供 使 用 ， 
说 明 如 下 : 


@ ”autoplay: 视频 就 绪 后 立即 播放 。 

@ controls: 显示 浏览 器 默认 的 播放 器 控件 ， 如 示例 中 的 按钮 。 

@@ 。 loop: 某 个 文件 完成 播放 后 重复 播放 。 

@ preload: 与 页 面 一 同 进行 加 载 ， 并 预备 播放 。autoplay 存在 时 则 忽略 该 属性 。 
@ src: 指定 媒体 的 地 址 。 


代码 第 53 行 获 取 播 放 列表 中 的 文件 元 素 并 转化 为 数组 。 代 码 第 55 行 循环 文件 数组 ， 监 听 每 
个 元 素 的 click 事件 。 当 用 户 点 击 列表 文件 时 ， 给 文件 添加 播放 的 样式 类 ， 并 重新 设置 audio 的 
ste 属性 。 此 时 ， 音 乐 被 切换 ， 并 且 所 有 播放 状态 被 重 置 为 初始 状态 。 


本 例 中 并 没有 提 及 audio 元 素 自身 事件 的 相关 使 用 。audio 元 素 拥有 比 一 般 元 素 更 多 的 事件 


状态 ， 如 pause、play、progress、waiting 等 。 用 户 可 以 通过 这 些 事件 ， 编 写 更 为 复杂 的 自 定 
义 音 频 播放 器 。 





了, 也 范例 一 制作 视频 播放 器 APP 
上 面 的 示例 已 经 向 读者 展示 HTML 5 带 来 的 video 元 素 在 浏览 器 视频 上 的 突破 ， 摆 脱 了 传统 
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浏览 器 播放 视频 过 度 依 赖 于 第 三 方 插件 的 局 面 。 虽 然 video 非常 美好 ， 但 是 各 种 浏览 器 对 视频 控 
件 的 实现 不 同 ， 在 原 有 的 面板 增加 自 定义 功能 更 是 难 上 加 难 。 本 例 将 初步 实现 一 个 自 定义 的 播放 
器 ， 给 各 位 读者 提供 一 个 思路 。 

本 例 播放 器 将 实现 3 个 基本 功能 : 播放 、 暂 停 、 全 屏 。 使 用 Chrome 浏览 器 打开 网 页 文件 ， 
运行 结果 如 图 3.5 所 示 。 点 击 视频 中 央 的 播放 按钮 ， 运 行 结果 如 图 3.6 所 示 。 








图 3.5 使 用 Chrome 打开 网 页 文件 图 3.6 点 击 视频 中 央 的 播放 按钮 


此 时 ， 中 央 的 播放 按钮 被 隐藏 ， 紧 随 着 出 现 视频 底部 工具 条 。 该 工具 条 并 非 浏览 器 原生 视频 
工具 条 ， 而 是 通过 HTML 进行 模拟 定制 。 如 图 3.6 所 示 ， 工 具 条 上 出 现 了 左下 角 和 暂停 按钮 和 右 
下 角 全 屏 按钮 。 








| 除了 例子 实现 的 3 个 功能 外 ， 后 续 例子 将 会 在 本 例 实现 的 基础 上 进行 加 强 ， 读 者 可 以 继续 阅 
[ 读 后 续 示例 ， 感 受 自 定义 的 魅力 。 








3.3.1 普通 视频 播放 器 
利用 编辑 器 打开 “3-4 .普通 视 频 播放 器 html” 文 件 ， 代 码 如 下 : 


【代码 3-4】 
01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 
04 C3 Lh > he 此 处 样式 忽略 ， 读 者 可 以 查看 对 应 源 代码 */</style> 
05 <script src="../js/jquery-1.8.3.js"></script> 
06 </head> 
07 <body> 
08 <header><h2> 做 一 个 自己 的 视频 播放 器 </h2></header> 
09 <div class="video box"> 
10 <video src="../res/BigBuck.webm" width="480" height="320" 
controls></video> 
a </div> 
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代码 第 16~19 行 定义 了 工具 类 构造 函数 。 函 数 接收 1 个 参数 ， 该 参数 需要 加 入 自 定义 工具 


条 的 video 元 素 。 
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代码 第 20~76 行 在 VideoControl 的 prototype 原型 上 增加 如 下 4 个 方法 : 
@ init 初始 化 函数 。 

_render: 生成 工具 条 HTML 结构 。 

_bind: 在 工具 条 元 素 上 绑 定 事件 。 

_requestFullscreen: video 元 素 全 屏 方 法 。 


第 3 章 移动 特性 2 一 -多 媒体 形式 








有 prototype 属性 是 JavaScript 面向 对 象 编程 的 基础 ， 如 果 对 其 还 不 是 很 了 解 ， 可 以 参考 
[ http://msdn.microsoft.com/zh-cn/magazine/cc163419.aspx。 








_render 方法 将 字符 模板 CONTROLS_HTML 插入 对 应 的 video 父 节点 中 ， 用 于 构建 工具 条 
DOM 结构 。 

_bind 方法 在 工具 条 的 外 围 容器 增加 事件 委托 ， 监 听 元 素 类 型 为 符合 选择 器 “div[data- 
type]” 的 click 事件 。data-type 是 自 定 义 的 元 素 属 性 ， 表 示 播 放 按钮 的 类 型 。 本 例 中 共有 4 种 类 
型 ， 具体 如 下 : 


@ ”go0: 初始 状态 中 央 的 大 三 角 按钮 事件 类 型 。 
@ play: 工具 条 播放 按钮 事件 类 型 。 

@ pause: 工具 条 暂停 按钮 事件 类 型 。 

@ fullscreen: 工具 条 全 屏 按钮 事件 类 型 。 


在 各 种 浏览 器 上 ，video 元 素 的 播放 和 暂停 方法 的 名 称 都 相同 ， 分 别 为 play 和 pause。 人 全屏 
方法 由 于 还 处 于 草案 阶段 ， 因 此 需要 加 上 对 应 浏览 器 的 前 级 名 ， 代 码 第 60~75 行 就 是 为 了 解决 
这 个 问题 而 设置 的 。 兼 容 方案 可 以 参考 代码 ， 这 里 不 做 过 多 说 明 。 

细心 的 读者 会 发 现 ，Chrome 浏览 器 下 调用 video 全 屏 方 法 后 ， 不 论 video 是 否 带 有 controls 
属性 ， 都 会 出 现 播放 器 的 默认 工具 条 ， 这 显然 不 是 当初 想 看 到 的 ， 读 者 不 妨 先 想 想 ， 稍 后 会 给 出 
解决 方案 。 








二 本 次 代码 分 析 主 要 针对 示例 的 脚本 让 辑 ， 样 式 说 明 可 以 参考 源码 中 的 注释 。 | 








3.3.2 ”添加 视频 进度 条 


本 例 将 完成 给 自 定义 播放 器 添加 进度 条 的 工作 。 一 共 会 添加 两 种 进度 条 ， 分 别 为 下 载 进度 条 
和 播放 进度 条 。 使 用 Chrome 浏览 器 打开 网 页 文件 ， 点 击 屏幕 中 央 的 三 角 播 放 按钮 ， 播 放 器 底部 
出 现 自 定义 工具 条 ， 同 时 进度 条 慢 慢 地 向 右 伸 长 ， 运 行 效 果 如 图 3.7 所 示 。 





图 3.7 点 击 播放 按钮 
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图 3.7 中 的 蓝 色 进度 条 表示 播放 时 间 ， 灰 色 条 表示 视频 下 载 进度 。 将 鼠标 悬浮 于 进度 条 之 
上 ， 此 时 进度 条 上 方 会 出 现 对 应 的 时 间 提 示 框 ， 效 果 如 图 3.8 所 示 。 

















图 3.8 ”鼠标 悬浮 于 进度 条 出 现时 间 提 示 


本 例 的 代码 构建 在 “3-5. 添 加 视频 进度 条 .html” 的 功能 基础 之 上 。 下 面 对 增添 的 代码 部 分 做 
-个 分 析 。 
字符 串 模板 CONTROLS_HTML 增加 进度 条 HTML 结构 ， 代 码 如 下 : 


"<div class="control progress_control">' + // 进度 条 外 围 层 
'<div class="progress bar bg"></div>' + // 进度 条 背景 层 
"<div class="progress bar buffered"></div>' + // 下 载 进度 条 层 
'<div class="progress bar played"></div>' + // 播放 进度 条 层 





"<div class="progress bar time">' + // 悬浮 提示 外 围 层 
"<div class="progress bar _ time line"></div>' + 
"<div class="progress bar time txt">00:00</div>' + // 悬浮 时 间 提 示 
'</div>' + 
VGN 十 


本寺 | HTML 模板 对 应 的 CSS 可 以 参考 源码 。 ] 


视频 工具 类 VideoControl 的 prototype 原型 上 增加 _progress 和 _bartime 方法 。 其 中 _progress 
方法 用 于 控制 下 载 进 度 条 的 移动 ， 代 码 如 下 : 





_Progress: function () { // 控制 下 载 进度 条 
var self = this, 
video = self.video, // 实例 上 的 video 属性 
video ele = video.get (0), // 视频 的 原生 元 素 


progress bar = self.wraper.find('div.progress_control'),，// 进度 条 外 围 元 素 
Progress bar buffered = 
self .wraper.find('div.progress_bar_ buffered');// 下 载 进度 条 元 素 
Video.on({ 


"progress': function (e) { // 监听 video 的 下 载 进度 事件 
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video 的 buffered 属性 返回 1 个 TimeRanges 对 象 。TimeRanges 对 象 表示 音 视频 的 已 缓冲 部 
分 ， 对象 具 有 1 个 length 属性 ， 表 示 音 视频 中 已 缓冲 范围 的 数量 ， 同 时 还 具有 两 个 方法 ， 即 start 
和 end， 语 法 如 下 : 


_bartime 方法 用 于 实现 鼠标 悬浮 进度 条 的 时 间 提 示 ， 代 码 如 下 : 


最 后 ， 完 成 播放 进度 条 的 动态 更 新 功能 ， 修 改 原 型 方法 timeupdate， 代 码 如 下 : 
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currentTime.html (timeFormat (video.currentTime) );  // 当前 播放 时 间 动 态 更 新 
var percent = video.currentTime / video.duration; // 播放 时 间 占 总 时 间 百 分 比 
progress bar played.width(percent * progress bar.width()); 
// 设置 播放 进度 条 宽度 

}, 

'loadedmetadata': function () { // 视频 元 数据 加 载 完毕 后 触发 
duration.html (timeFormat (video.duration)); 

} 

]) 7 


在 上 面 的 代码 中 ， 将 之 前 监听 video 的 play 事件 换 为 loadedmetadata 事件 ， 是 为 了 保证 视频 
的 元 数据 下 载 完 毕 后 再 设置 视频 总 耗 时 ， 避 免 在 play 事件 触发 时 获取 video 的 duration 属性 
为 空 。 








必 寺 | 视频 的 元 素 据 包含 时 长 、 尺 寸 〔 仅 视频 ) 以 及 文本 轨道 等 信息 。 | 











3.3.3 ”添加 视频 快 进 慢 进 按钮 

HTML 5 的 video 元 素 几乎 带 来 了 所 有 传统 播放 器 都 具备 的 功能 ， 本 例 将 在 自 定义 播放 器 上 
加 入 慢 进 和 快 进 按钮 。 使 用 Chrome 浏览 器 打开 网 页 文件 ， 点 击 屏幕 中 央 的 三 角 播放 按钮 ， 播 放 
器 底部 出 现 自 定 义工 具 条 ， 同 时 下 方 工具 条 左 端 出 现 快慢 进 按钮 ， 运 行 效果 如 图 3.9 所 示 。 





图 3.9 点 击 播放 按钮 


本 例 的 代码 构建 在 “3-6. 添 加 视频 快 进 慢 进 按钮 .html” 的 功能 基础 之 上 。 下 面 对 增 添 的 代码 
部 分 做 一 个 分 析 。 

字符 模板 增加 快 进 和 慢 进 HTML 结构 ， 代 码 如 下 : 

<div class="control backward control" data-type="backward" title=" 慢 退 
"><div></div><div></div></div> 

<div class="control forward control" data-type="forward" title=" 快 进 
"><div></div><div></div></div> 
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二 backward_control 和 forward_control 样式 类 ， 读 者 可 以 参考 下 载 资源 源码 。 











在 HTML 结构 中 ， 自 定义 data-type 属性 表示 对 应 按钮 元 素 执行 的 方法 名 。 快 进 和 慢 进 在 委 
托 方法 中 对 应 的 方法 名 为 “backward” 和 “forward”， 方 法 执行 脚本 如 下 : 





如 上 代码 所 示 ， 快 慢 进 执行 相同 的 实例 方法 playbackRate， 该 方法 接收 1 个 数字 参数 ， 表 
示 增 减 播放 速度 ，_playbackRate 代码 如 下 : 





playbackRate 属性 表示 视频 的 播放 速度 ， 默 认 值 为 1， 数值 越 小 播放 速度 越 慢 ， 反 之 亦 然 。 


3.3.4 ”处 理 带 字幕 的 视频 


本 例 将 给 读者 介绍 的 是 在 HTML 5 视频 中 添加 字幕 。 听 起 来 这 像 是 一 项 非常 复杂 的 工作 ， 
不 过 HTML 5 已 经 将 字幕 文件 进行 抽象 独立 ， 同 时 非常 简单 的 就 能 在 任意 视频 中 添加 字幕 。 本 
节 示 例 不 能 直接 用 浏览 器 打开 文件 ， 和 否则 Chrome 下 会 报 出 “Cross-origin text track load denied by 
Cross-Origin Resource Sharing policy ”的 错误 信息 ， 表 示 字 幕 文件 加 载 违反 了 跨 域 资源 共享 策 
略 。 所 以 ， 需 要 将 文件 部 署 在 Web 服务 器 上 ， 如 Apache、Nginx、IIS 等 。 

部 署 完 毕 后 ， 用 Chrome 打开 对 应 网 址 ， 点 击 屏幕 中 央 的 三 角 播 放 按钮 ， 视 频 的 下 方 出 现 字 
幕 ， 效 果 如 图 3.10 所 示 。 





图 3.10 点 击 播放 按钮 ， 视 频 下 方 出 现 字幕 
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本 例 的 代码 构建 在 “3-7. 处 理 带 字幕 的 视频 html” 的 基础 上 ， 没 有 额外 的 脚本 改动 。 在 
HTML 中 增加 字幕 结构 ， 代 码 如 下 : 





track 标签 为 视频 规定 外 部 文本 轨道 ， 标 签 带 有 多 种 新 属性 ， 具 体 如 下 : 

default: 表示 该 轨道 是 默认 的 。 

kind: 表示 轨道 文本 类 型 ， 如 : captions、chapters、descriptions、metadata、subtitles。 
label: 轨道 的 标签 或 标题 。 

src: 轨道 的 URL。 

srclang: 轨道 的 语言 ， 若 kind 属性 值 是 “subtitle”， 则 该 属性 是 必需 的 。 


本 例 track 标签 的 轨道 文件 为 1 个 WebVTT 文件 。WebVTT 文件 是 一 个 简单 的 纯 文本 ， 打 开 
“.Jres/BigBuck.vtt”， 代 码 如 下 : 





在 WebVTT 文本 中 ， 所 有 c 标签 都 可 以 带 CSS 样式 ， 比 如 <c.demoClass>。 还 有 一 种 v 标 
签 ， 也 可 以 带 样式 ， 同 时 还 可 以 加 入 人 名 。 本 例 给 v 标签 加 上 2 种 样式 类 ， 如 下 代码 所 示 : 


该 类 声音 文本 样式 需要 以 字符 串 “::cue” 开 头 ，cue 表示 指定 文本 和 视频 文件 中 字幕 的 时 间 
定位 。 小 括号 中 间 的 内 容 如同 CSS， 表 示 选 择 器 的 名 称 。 其 中 的 “.load” 如 同一 般 CSS， 表 示 
文本 中 的 样式 类 。 其 中 ，“v[voice="Man"]” 表 示 对 应 人 物 音 轨 文 字 的 样式 类 。 
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画 WebVTT 还 有 更 多 更 奇怪 的 设置， 详情 可 以 参考 网 址 htpVdevw3orghtmlsweov | 



































了 ,4 本 章 小 结 


本 章 主要 介绍 了 使 用 HTML 5 多 媒体 特性 ， 包 括 音 频 与 视频 设计 ， 并 通过 多 个 实际 范例 介 
绍 了 如 何 使 用 HTML 5 多 媒体 特性 。 本 章 需要 读者 了 解 的 虽然 仅仅 只 有 两 个 标签 audio 和 
video， 但 它们 延伸 出 来 的 技术 却 不 是 新 手 可 以 轻松 掌握 的 ， 希 望 读 者 能 多 多 练习 ， 直 到 理解 了 
每 种 方法 背后 的 含义 。 
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第 4 章 


< 移动 持 性 3 一 一 地 理 位 置 定位 > 





地 理 位 置 是 HTML 5 非常 重要 且 诱 人 的 特性 之 一 ， 在 当今 移动 互联 网 时 代 更 显得 价值 连 
城 。 开 发 者 只 需要 简单 的 几 行 代码 就 可 以 轻松 获取 用 户 的 地 理 位 置信 息 ， 借 助 这 些 信息 可 以 开发 
基于 位 置信 息 的 高 级 应 用 ， 将 虚拟 世界 和 现实 世界 整合 在 一 起 ， 以 一 种 难以 捉摸 、 变 化 莫 测 的 方 
式 出 现在 大 众 眼 前 。 本 章 将 向 读者 介绍 HTML 5 中 这 一 项 伟大 的 技术 。 


认识 地 理 位 置 


4.1.1 纬度 和 经 度 坐标 


纬度 和 经 度 是 一 种 利用 三 度 空 间 的 球面 来 定义 地 球 上 空间 的 球面 坐标 系统 ， 能 够 标示 地 球 上 
的 任何 一 个 位 置 。 

谈 到 经 纬度 ， 可 以 追溯 到 公元 前 344 年 ， 亚 历 山大 渡海 南侵 ， 随 军 的 地 理学 家 尼 尔 库 斯 沿途 
搜索 材料 ， 准 备 绘制 一 幅 世 界 地 图 。 尼 尔 库 斯 发 现 沿 着 亚历山大 东 征 的 路 线 ， 由 西向 东 ， 无 论 季 
节 变换 与 日 照 长 短 都 很 相仿 。 于 是 第 一 次 在 地 球 上 划 出 了 一 条 纬 线 ， 这 条 线 从 直布罗陀 海峡 起 ， 
沿 着 托 鲁 斯 和 喜马拉雅 山脉 一 直到 太平 洋 。 

经 线 又 称 为 子午 线 ， 定 义 为 地 球 表 面 连接 南北 两 极 的 半圆 弧 。 任 何 两 根 经 线 的 长 度 相 同 ， 相 
交 于 南北 两 极 ， 每 根 经 线 都 有 相对 应 的 值 ， 称 为 经 度 。 纬 线 定义 为 地 球 表面 某 个 点 随 着 地 球 自转 
所 形成 的 轨迹 ， 任 何 一 根 纬 线 都 是 圆 形 而 且 两 两 平行 。 

经 1884 年 国际 会 议 协商 ， 决 定 以 通过 英国 伦敦 格林 尼 治 天 文 台 《〈 原 址 ) 的 经 线 为 起 始 线 。 

















这 根 经 线 称 本 初子 午 线 ， 以 本 初子 午 线 为 起 点 ， 向 东 为 东经 度 (E)， 向 西 为 西 经 度 〈W )。 经 度 
共 360”， 本 初子 午 线 为 0” 经线 ， 东 西 经 度 各 为 180”， 东 、 西 经 180” 经线 为 同一 条 经 线 ， 


统称 180” 经 线 。 

纬度 以 赤道 为 起 点 ， 赤 道 以 北 为 北纬 度 (N)， 赤 道 以 南 为 南 纬度 (S)。 赤 道 是 0” 纬度 ， 
北纬 度 的 最 大 值 是 90” ， 即 北极 点 ; 南 纬度 的 最 大 值 为 90” ， 即 南极 点 。 

下 面 通过 图 4.1 来 了 解 地 球 经 纬度 。 
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南 机 
图 4.1 地 球 经 纬度 


4.1.2 ”定位 数据 


HTML 5 通过 Geolocation 接口 获取 用 户 地 理 位 置信 息 ， 开 发 者 不 需要 关心 接口 是 在 什么 设 

备 上 、 使 用 什么 底层 技术 去 实现 ， 只 需要 会 简单 的 调用 即 可 。 
- 般 来 说 ， 浏 览 器 可 以 从 设备 中 获取 以 下 数据 来 源 : 

@ IP 地 址 。 

@ GPS (Global Positioning System， 全 球 定位 系统 ) 。 

®@ RFID (Radio Frequency IDentification， 射 频 识别 ) ， 如 汽车 防盗 和 无 钥匙 开门 系统 的 

应 用 、 门 禁 和 安全 管理 系统 。 

@ Wi-Fi 地址。 

@ GSM 或 CDMA 手机 的 ID。 

@ 用 户 自 定义 的 地 理 位 置 数据 。 


每 种 获取 方式 的 原理 不 同 ， 所 以 在 精准 度 上 也 会 产生 差异 ， 比 如 使 用 笔记 本 连接 Wi-Fi 上 网 
获取 的 经 纬度 信息 与 使 用 手机 在 GSM 上 获取 的 经 纬度 信息 很 可 能 会 不 完全 一 致 。 下 面 通过 比 对 
各 项 技术 的 优 缺 点 让 读者 能 够 更 加 全 面 地 了 解 差异 。 表 4-1 列 出 了 定位 数据 来 源 的 优 缺 点 。 


表 4-1 定位 数据 来 源 优 缺 点 

















优点 缺点 

非常 精确 定位 时 间 长 、 耗 电量 大 、 室 内 效果 差 
RFID 精准 、 可 在 室内 接 入 设备 少 
Wi-Fi 精准 、 可 在 室内 需要 有 无 线 接 入 点 
基于 手机 较 精 准 、 可 在 室内 需要 有 手机 网 络 ， 且 基站 点 要 多 
用 户 自 定义 自行 输入 位 置 更 准备 ， 定 位 快速 当 用 户 位 置 发 生变 化 时 不 准确 
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HTML 5 通过 Geolocation 除了 能 获取 到 经 纬度 坐标 外 ， 还 能 提供 位 置 坐标 的 精准 度 。 对 于 
某 些 较 高 级 的 硬件 设备 ， 浏 览 器 通过 Geolocation 还 能 获取 到 海拔 、 海 拔 精 准 度 、 行 驶 方向 和 速 
度 等 ， 开 发 者 可 以 通过 该 接口 获取 到 与 原生 应 用 同样 丰富 的 数据 形式 ， 开 发 出 更 多 酷 炫 的 功能 ， 
而 这 一 切 都 可 以 在 浏览 器 里 实现 。 


4.1.3 ”构建 地 理 位 置 应 用 


地 理 位 置信 息 涉 及 用 户 的 隐私 ，HTML 5 Geolocation 设计 之 初 就 考虑 到 了 这 一 点 ， 除 非 用 户 
明确 允许 ， 否 则 无 法 获取 位 置信 息 。 

当 用 户 访问 一 张 使 用 HTML 5 Geolocation 功能 开发 的 页 面 时 ， 浏 览 器 会 出 现 用 户 授权 提示 
条 。 图 4.2 显示 了 在 Chrome 浏览 器 下 用 户 授权 条 的 样式 。 





DD) localhost/Geolocation  x Wo 


如 © 日 localhost/Geolocation.htm EC 


侠 localhost 想 要 使 用 您 的 计算 机 的 所 在 位 置信 息 。 [允许 | | 拒绝 | 。 了 解 详情 


经 度 ， 
纬度 
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不 同 的 浏览 器 ，Geolocation 用 户 授 权 提 示 信 息 形 式 也 不 同 。Firefox 的 授权 提示 如 图 4.3 所 示 。 
=151x] 


ECZEITLITT 
文件 四 编辑 到) 查看 WD 历史 G) 书签 中 工具 中 帮助 o 
| Jhttp://localhost/Geolocation htm 


后 日 Plu cj]| 回 - 百 P| 有 会 
经 您 想 要 与 localhozt 共享 您 的 位 置信 息 中 ? 
纯 了 着 本 ~… 











共享 方位 信息 Q) | 











图 43 Firefox 浏览 器 下 Geolocation 功能 授权 提示 


HTML 5 Geolocation 方法 在 使 用 时 除了 会 进行 用 户 授权 ， 还 允许 对 过 往 进行 授权 的 网 站 进行 
再 修改 。 用 户 可 以 通过 修改 网 站 授权 保护 自己 的 隐私 ， 比 如 在 咖啡 厅 使 用 带 有 Geolocation 的 应 
用 查找 周边 的 商户 信息 ， 这 时 通过 经 纬度 信息 定位 周边 商户 ， 可 以 方便 地 寻找 信息 ， 但 当 环境 发 
生变 化 时 ， 如 回 到 家 中 ， 此 时 可 以 重新 将 授权 私有 ， 以 起 到 保护 作用 。 下 面 将 通过 图 示 来 学 习 如 
何 对 已 授权 的 网 站 取消 授权 。 
以 Chrome 浏览 器 为 例 ， 首 先 点 击 浏览 器 导航 栏 右 侧 圆 形 类 似 定位 的 按钮 ， 如 图 44 所 示 。 然 后 
点 击 弹出 提示 框 的 “管理 位 置 设置 ”链接 ， 此 时 会 重新 打开 一 个 窗口 ， 链 接地 址 为 
“chrome://settings/contentExceptions#location”， 新 开 的 页 面 显示 当前 浏览 器 的 地 理 位 置信 息 情况 
列表 ， 用 户 可 以 通过 编辑 列表 选择 是 否 再 次 对 网 站 进行 授权 ， 如 图 4.5 所 示 。 
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D) localhost/Geolocation ; x We 


人 © Dlocalhost/0 htm 会 字 
经 度 ; 1 人 4. 55976549 上 区 全 人 生生 由 FF WPI 
纬度 ，31. 1608576 | 者 这 些 设置 以 便 习 后 访问 





管理 位 置 设置 


地 理 位 置信 息 例外 情况 


主机 名 可 包含 调配 符 ) 
htpi/flocalhost:i0 





图 4.5 ”Chrome 浏览 器 Geolocation 授权 编辑 列表 


4 .2 手机 地 理 位 置 定位 


在 一 个 以 地 点 为 核心 的 POI 系统 中 ， 需 要 获取 用 户 地 理 位 置 的 坐标 。 本 例 演示 通过 Wi-Fi 获 
取 当 前 地 理 位 置 的 坐标 。 当 用 户 打开 浏览 器 时 ， 页 面 上 显示 通过 手机 3G 网 络 信号 地 理 定位 的 当 
前 坐标 ， 同 时 用 Google Maps 显示 标记 当前 的 地 理 位 置 。 

在 iPhone 上 使 用 Safari 浏览 器 打开 网 页 文件 ， 运 行 效果 如 图 4.6 所 示 。 





图 4.6 询问 是 否 允许 使 用 当前 的 位 置 
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画 本 例 需 要 通过 架设 Web 服务 器 来 访问 文件 。 


点 击 “ 好 ”按钮 ， 运 行 效果 如 图 4.7 所 示 。 











通常 手机 信号 获取 经 纬度 ， 显 示 当 前 位 置 


手机 定位 
， 始 座 ; 121.41631423959416 
，。 纯度 ;31.218327489716945 





4.7 耳 使 用 联通 3G 网 络 定位 


代码 在 iPhone 的 Safari 浏览 器 下 测试 通过 ， 建 议 使 用 Safari 浏览 器 打开 ; 确保 手机 关闭 Wi- 
Fi; 确保 手机 已 通过 手机 信号 连接 上 网 络 ; 出 于 隐私 考虑 ， 在 第 一 次 运行 该 页 面 时 ， 会 弹出 
提示 是 否 授权 使 用 您 的 地 理 位 置信 息 ， 该 程序 需要 授权 才 可 正常 使 用 定位 功能 。 





本 例 “4-1. 手 机 地 理 定位 .html” 的 关键 函数 via3G 代码 如 下 : 
【代码 4-1】 





第 4 章 移动 特性 3 一 一 地 理 位 置 定 位 





第 04 行 ， 调 用 navigatorgeolocation.getCurrentPosition 方法 通过 手机 信号 获取 定位 信息 。 


人 外. -谷歌 地 图 的 使 用 


本 节 我 们 着 重 向 读者 介绍 谷歌 地 图 的 使 用 方法 ， 包 括 追 踪 用 户 的 位 置 、 查 找 路 线 和 用 户 自 定 
义 的 地 理 定位 等 功能 。 


4.3.1 追踪 用 户 的 位 置 


在 地 图 上 描绘 出 移动 路 径 可 以 清楚 地 表示 用 户 的 移动 轨迹 。 本 例 演示 用 Google 地 图 追踪 用 
户 的 地 理 位 置 ， 根 据 用 户 的 移动 轨迹 在 Google 地 图 上 夯 出 移动 路 线 图 。 

在 iPhone 使 用 Safari 浏览 器 打开 “4-2. 使 用 Google 地 图 追踪 用 户 的 位 置 .html” 网 页 文件 ， 
运行 效果 如 图 4.8 所 示 。 








| 


通过 3G 网 络 访问 ， 需 要 通过 Web 服务 器 来 访问 网 页 文件 。 | 





使 用 Google 地 图 追踪 用 户 的 位 置 


当前 地 理 位 置 当前 位 置 纬度: 30.301720086256744， 经 度 ; 
120.29849378345972) 





图 4.8 在 IOS 上 用 Safari 浏览 器 打开 
移动 当前 位 置 ， 行 走 一 段 距离 ， 在 移动 过 程 中 ，Google 地 图 上 会 画 出 移动 轨迹 ， 如 图 4.9 所 示 。 


车。 可 以 开车 或 者 乘坐 公交 来 移动 当前 位 置 ， 效 果 会 更 好 。 | 
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使 用 Google 地 图 追踪 用 户 的 位 置 


当前 地 理 位 置 当前 位 置 (纬度 ; 30.301997659223108， 经 度 ; 
120.31201474153198) 











4.9 移动 过 程 中 
利用 编辑 器 打开 “4-2. 使 用 Google 地 图 追踪 用 户 的 位 置 .html” 文 件 ， 代 码 如 下 : 
【代码 4-2】 
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代码 第 86 行 是 本 例 的 入 口 函数 ， 该 函数 调用 getWatchPosition 方法 ， 然 后 执行 
navigation.geolocation 对 象 的 watchPosition 方法 。 

第 80 行 调用 HTML 5 Geolocation API 的 watchPosition 函数 ， 有 3 个 参数 ， 这 3 个 参数 和 
getCurrentPostion 含义 一 样 ， 区 别 在 于 watchPosition 函数 是 一 个 监视 器 ， 监 视 用 户 的 位 置 是 否 发 
生变 化 ， 如 果 发 生变 化 ， 浏 览 器 就 会 触发 其 回调 函数 ， 成 功 则 回调 函数 watchMap， 失 败 则 回调 
函数 errorHandler。 

第 40 行 的 作用 是 在 用 户 移动 过 程 中 重新 标记 用 户 的 当前 位 置 。 

第 41 行 调用 画 线 程序 。Google 提供 的 画 线 API Polyline 会 在 2 点 间 画 出 1 条 直线 。 根 据 用 
户 频繁 的 位 置 移 动 形成 多 个 点 ， 连 接 每 个 点 ， 形 成 一 条 直线 。 

第 43~63 行 是 画 线 函数 。 首 先 把 画 线 的 变量 保存 在 闭 包 中 ， 注 意 第 61 行 代码 ， 该 函数 会 在 
页 面 载 入 时 立即 执行 ， 并 初始 化 coordinatesPathArray、lineOption 、coordsPath 这 3 个 变量 ， 第 
62 行 返回 draw 函数 。 

第 52~59 行 定义 真正 的 画 线 函 数 draw， 第 40 行 调用 的 drawPath 函数 实际 上 调用 的 是 drawp 
函数 。 传 递 的 参数 为 当前 的 坐标 。draw 函数 的 原理 是 先 清除 原先 已 经 画 的 轨迹 ， 再 把 当前 的 位 
置 坐 标 加 入 到 历史 坐标 数组 coordinatesPathArray 中 ， 最 后 根据 新 的 数组 在 Google Map 上 重新 绘 
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制 一 条 轨迹 。 
第 53 行 清除 当前 地 图 上 已 经 画 好 的 路 径 轨 迹 。 
第 54 行 把 当前 位 置 坐标 加 入 到 coordinatesPathArray 数组 中 。 
第 55~57 行 把 当前 新 的 位 置 坐标 数组 在 Google Map 上 重新 绘制 出 来 。 








| 更 多 关于 通过 Google Map 画 线 的 知识 点 ， 请 参考 谷歌 官方 网 址 
| https://developers.google.com/maps/documentation/javascript/reference#Polyline。 








4.3.2 ”查找 路 线 
本 例 演示 一 个 生活 中 经 常用 到 的 场景 ， 根 据 Google 地 图 查找 出 行路 线 。 路 线 查 找 需要 提供 


起 始 位 置 和 目的 地 位 置 。 利 用 HTML 5 提供 的 获取 地 理 位 置信 息 ， 可 以 非常 方便 地 定位 到 当前 
地 理 位 置 ， 然 后 提供 目的 地 ， 就 可 以 根据 Google 地 图 API 查找 出 行路 线 。 本 例 演示 的 路 线 查 找 
功能 也 可 以 选择 出 行 方式 ， 包 括 自驾 车 、 公 交 、 步 行 、 自 行车 4 种 方式 。 

使 用 Chrome 浏览 器 打开 “4-3. 使 用 Google 地 图 查找 路 线 .html” 网 页 文件 ， 运 行 效 果 如 图 


4.10 所 示 。 








查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 , 经度 : 120.155069 ) } 


起 始 位 置 侍 用 当前 位 置 作为 起色 位 置 
结束 位 置 使 用 当 荫 位 置 作为 结束 位 轩 
出 行 方案 【和 交 





话 
新 江 伺 完 寺 | 蕊 社区 雪 
BR = 
HN 
2 
保 司 堪 。 
Sa 





图 4.10 查找 路 线 页 面 
在 “起 始 位 置 ” 一 栏 点 击 “ 使 用 当前 位 置 作为 起 始 位 置 ” 文 字 ， 运 行 效果 如 图 4.11 所 示 。 





查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 ， 经度 : 120.155069 
起 始 位 置 习 的 位 轩 使 用 当前 位 置 作为 和 好 位 轩 


结束 位 置 使 用 当前 位 置 作为 结束 位 轩 


4.11 点 击 使 用 当前 位 置 作为 起 始 位 置 
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在 “结束 位 置 ”一 栏 填写 “西溪 国家 湿地 公园 ” 选择 “出 行 方案 ”为 “公交 ”然后 点 击 
“查找 ”按钮 ， 运 行 效果 如 图 4.12 所 示 。 图 中 左 侧 以 地 图 形式 显示 查找 结果 ， 标 签 A 代表 起 始 
位 置 ， 标 签 B 代表 结束 位 置 ， 图 中 右 侧 以 文字 的 形式 显示 具体 的 路 线 信息 。 


查找 路 线 { 当前 位 置 ( 纬 讼 : 30 274088999999996 ,经度 : 120.155069 ) } 





起 始 位 置 sf 到 | 位 全 frbiait 人 年 
MR | rrronrrxen 
出 行 方案 〖 妆 司 查找 


步行 路 线 正在 测试 中 。 注意 - 此 路 线 可 能 缺乏 部 分 人 行道 
信息 。 


中 国 浙江 省 杭州 市 拱 琶 区 莫 干 山路 10 号 邮政 编码 ; 







上 日 K213 路 夜间 车 区 间 空调 公交 开 往 : 留 下 
4 下 午 11.56- 上 午 12:52 (56 分 钟 , 13 站 ) 
下 服务 二 车 方 : Mapebc 





图 4.12 查找 去 西溪 国家 湿地 公园 的 路 线 
设置 “出 行 方案 ”为 “驾车 ”， 然 后 点 击 “ 查 找 ” 按 钮 ， 运 行 效果 如 图 4.13 所 示 。 
查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 , 经度 : 120.155069 ) } 


夫人 轩 R55 ptm 


Rt 













五 所 雷 1 从 英和 干 山路 向 北 行驶 ,到 窗 滤 桥 路 。 57 米 
CA | 2 在 第 一 个 路 口 向 有 转 ， 朝 密 渡 桥 路 行进 02 公里 
3. 在 第 一 个 路 口 向 左 转 ， 朝 湖 墅 南路 行进 04 公里 


i “6._ 向 左 转 ， 进入 古 于 路 05 公 里 





1 
有 有 本 二 4 
a ee spol po APiev ce a 地 图 数据 2013 GS(2011)6020 AutoNavi Google 








图 4.13 驾车 路 线 
设置 “出 行 方案 ”为 “自行 车 ”， 然 后 点 击 “ 查 找 ” 按 钮 ， 运 行 效果 如 图 4.14 所 示 。 
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查找 路 线 { 当前 位 置 ( 纬度 : 30.274088999999996 , 经 度 : 120.155069 ) } 





























图 4.14 自行 车 路 线 


画 没有 找到 自行 车 路 线 ， 因 为 Google 地 图 目前 只 有 美国 地 区 支持 自行 车 路 线 。 





设置 出 行 方案 为 “步行 ” 然后 点 击 “查找 ”按钮 ， 运 行 效果 如 图 4.15 所 示 。 





查找 路 线 ( 当前 位 置 ( 纬度 : 30 274088999999996 ,经 度 : 120.155069 ) } 
起 始 位 置 om A 
结束 位 置 Ra A 




















图 4.15 步行 路 线 


利用 编辑 器 打开 “4-3. 使 用 Google 地 图 查找 路 线 .html” 文 件 ， 样 式 部 分 代码 如 下 : 
【代码 4-3】 


构建 移动 网 站 与 APP: HTML 5 移动 开发 入 门 与 实战 ， 


HTML 部 分 代码 如 下 : 





第 4 章 ”移动 特性 3 一 一 地 理 位 置 定 位 





第 03 行 和 第 07 行 设计 的 输入 框 可 以 让 用 户 自 己 输入 路 线 查 找 的 起 始 位 置 或 者 结束 位 置 。 
第 04 行 和 第 08 行 定义 用 户 可 以 选择 以 当前 位 置 作为 起 始 或 者 结束 位 置 。 
第 12~17 行 定义 了 4 种 出 行 方式 ， 分 别 为 : 


TRANSIT: 公交 。 
DRIVING: 驾车 。 
BICYCLING: 自行 车 。 
WALKING: 步行 。 


第 21 行 <div id="directionsPannel"> 元 素 的 作用 是 把 路 线 查 找 的 文字 结果 显示 在 这 里 。 
JavaScript 逻辑 代码 部 分 如 下 : 
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第 17 行 在 navigator.geolocation.getCurrentPosition 函数 的 回调 结果 中 用 currentPosition 记录 定 
位 的 结果 。 如 果 是 使 用 当前 位 置 查找 路 线 ， 那 么 这 个 结果 在 执行 路 线 查找 时 会 用 到 。 

第 28~33 行 定义 “使 用 当前 位 置 作为 起 始 位 置 ” 和 “使 用 当前 位 置 作为 结束 位 置 ”的 事件 
处 理 函 数 ， 当 用 户 点 击 按钮 时 ， 设 置 其 对 应 的 文本 输入 框 的 值 为 “我 的 位 置 ” 并 把 字体 颜色 改 
为 蓝 色 。 然 后 设置 变量 isCurrent 的 值 为 rue， 用 来 标记 要 使 用 当前 位 置 作为 起 始 或 者 结束 位 置 。 

第 34-37 行 取消 使 用 当前 位 置 作为 查找 条 件 。 


本 司 当 用 户 在 输入 框 中 输入 文字 时 ， 表 示 用 户 不 想 使 用 当前 位 置 来 查找 。 


第 38~45 行 定义 了 “使 用 当前 位 置 作为 起 始 位 置 "“ 使 用 当前 位 置 作为 结束 位 置 ”2 个 文本 
输入 框 和 “查找 ”按钮 的 事件 代理 。 

第 46~83 行 是 查找 路 线 的 处 理 函 数 。 

第 48~49 行 获取 路 线 查找 的 起 始 和 结束 位 置 。 如 果 使 用 当前 位 置 ， 那 么 其 值 为 第 17 行 代码 
赋予 变量 currentPostion 的 值 ， 如 果 不 使 用 当前 位 置 作 为 查找 条 件 ， 就 对 应 获取 用 户 输入 
的 文字 。 

第 50 行 获取 用 户 选择 的 出 行 方式 。 
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第 57 行 调用 directionsService 的 route 方法 。 该 方法 提供 两 个 参数 ， 第 1 个 参数 为 查找 条 件 
(包括 路 线 的 起 始 、 结 束 位 置 和 出 行 方式 等 )， 第 2 个 参数 为 查找 结果 的 回调 函数 。 回 调 函数 中 
第 一 个 参数 是 具体 的 路 线 结果 ， 第 2 个 参数 代表 查找 结果 的 状态 。 








卫 元 要 了 解 更 多 谷歌 地 图 相关 的 查找 路 线 的 信息 接口 ， 读 者 可 以 参考 
[ https://developers.google.com/maps/documentation/javascript/reference#DirectionsService。 








第 58 行 表示 已 经 查找 到 了 结果 。 

第 61 行 表示 如 果 找 到 路 线 ， 就 在 地 图 上 显示 出 路 线 。 

第 62 行 在 <div id="directionsPanel"> 上 显示 查找 结果 的 文字 方案 。 

第 65~78 行 是 没有 正确 查找 到 路 线 的 错误 处 理 逻 辑 。 常 见 的 有 以 下 3 种 错误 : 
@ OK: 找到 路 线 。 

@ NOT FOUND: 起 点 和 终点 中 至 少 有 一 个 位 置 没 找到 。 

@ ZERO RESULT: 起 点 和 终点 都 找到 了 ， 但 没有 找到 相关 路 线 。 








总 更 多 的 错误 信息 请 参考 https://developers.google.com/maps/documentation/directions/?hl=zh-cn。 | 











第 114 行 表示 Google 地 图 可 用 后 马上 调用 init 函数 进行 初始 化 。 


4.3.3 用 户 自 定义 的 地 理 定位 


提供 以 地 理 位 置 服务 的 应 用 程序 ， 有 时 候 需 要 用 户 自主 选择 当前 地 理 位 置 。 本 例 演示 通过 用 
户 选择 或 者 输入 一 个 地 名 ， 去 获取 其 地 名 的 地 理 位 置信 息 。 当 用 户 打 开 浏览 器 ， 点 击 “ 某 一 个 地 
名 ”标签 ， 或 者 在 “文本 框 ” 中 输入 地 名 ， 然 后 点 击 “ 定 位 ”按钮 ， 网 页 程序 就 会 根据 查找 的 结 
果 显 示 其 地 理 位 置信 息 。 

使 用 Chrome 浏览 器 打开 “用 户 自己 定义 的 地 理 定位 ”网 页 文件 ， 运 行 效果 如 图 4.16 所 示 。 

在 城市 列表 中 点 击 “ 杭 州 ” 标 签 ， 运 行 效果 如 图 4.17 所 示 。 
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月 记 自 证 X 的 地 证 位 用 户 让 定义 的 地 于 定位 
初始 化 中 初始 化 中 各 度 :30274089 
8 化 天， 清和 过 拌 一 个 地 点 芭 化 入 ,汪汪 本 一个 地 训 DS 
北京 上海 杭州 成 部 深圳 -- 北京 上 海 杭 州 成 部 深圳 -- 
现 者 ,你 也 可 以 从 输入 一 个 地 名 开始 : 十 | 或 者 , 您 也 可 以 从 输入 一 个 地 名 开始 : 定位 中 
me 

| 

peas 

aan 呈 











和 本 
人 | So NE | ‘eh 
图 4.16 打开 网 页 文件 图 4.17 IP 使 用 联通 3G 网 络 定位 


在 “文本 框 ” 中 输入 “西溪 湿地 ”然后 点 击 “ 定 位 ”按钮 ， 运 行 效果 如 图 4.18 所 示 。 














用 户 自 定义 的 地 理 定位 














图 4.18 ”用户 自己 输入 的 定位 结果 
利用 编辑 器 打开 “4-4. 用 户 自 定义 的 地 理 定位 .html” 文 件 ， 代 码 如 下 : 
【代码 4-4】 
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第 07~12 行 定义 了 城市 列表 。 用 户 可 以 从 城市 列表 中 选择 一 个 城市 ， 当 用 户 点 击 城市 名 称 
标签 时 ， 程 序 会 获取 当前 点 击 的 城市 名 称 ， 根 据 该 城市 名 搜索 其 地 理 位 置信 息 ， 然 后 自动 定位 到 
所 选择 的 城市 。 设 置 列表 链接 控件 a 的 class 属性 为 ad， 可 以 方便 为 JavaScript 提供 DOM 查找 。 

第 15~16 行 代码 设置 一 个 文本 输入 控件 ， 用 户 可 以 自己 输入 地 名 或 者 城市 名 ， 当 用 户 点 击 
“定位 ”按钮 时 ， 程 序 会 根据 当前 输入 的 地 名 定位 当前 地 理 位 置信 息 ， 如 果 定 位 失败 ， 则 给 出 提示 。 

第 19~20 行 代码 分 别 设置 了 当前 定位 的 进度 提示 和 显示 地 图 信息 的 控件 ，JavaScript 部 分 代 


码 设计 如 下 : 
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第 02~06 行 代码 定义 了 5 个 全 局 变量 ，map 和 gLocalSearch 这 两 个 变量 只 需要 初始 化 一 
次 ， 但 在 多 个 地 方 调用 在 本 例 中 showMap 和 search 函数 调用 ) 可 以 把 变量 作用 域 提升 ， 减 少 
重复 实例 化 次 数 ; 另外 3 个 变量 保存 DOM 节点 信息 ， 在 代码 第 55~57 行进 行 初始 化 ， 把 作用 域 
提升 是 为 了 不 用 重复 获取 查询 开销 较 大 的 DOM 节点 。 

第 07~17 行 代码 初始 化 全 局 变量 map 和 gLocalSearch。 地 图 初始 化 默认 为 中 国 。 初 始 化 
gLocalSearch， 指 定 其 回调 函数 为 showPosition。 


ete 站 Googe Map V3 提供 的 地 图 搜索 APL， 详 细 的 使 用 说 明 请 参考 网 让] 
https://developers.google.com/maps/documentation/localsearch/ 。 





第 18~23 行 定义 显示 地 图 的 函数 ， 接 收 1 个 经 纬度 信息 的 对 象 。 

第 24~34 行 定义 gLocalSearch 回调 函数 的 具体 实现 ， 当 gLocalSearch 的 excute 函数 执行 完 
成 时 调用 这 个 函数 。 

第 25 行 通过 gLocalSearch 的 results 属性 获取 搜索 结果 的 第 1 个 返回 值 。 当 定位 成 功 时 ， 
results 数组 里 包含 了 一 组 搜索 结果 ， 这 里 将 获取 第 1 个 结果 ， 因 为 第 1 个 结果 一 般 最 精确 。 当 定 
位 不 成 功 时 ，results 为 1 个 空 数组 ， 有 兴趣 的 读者 可 以 打印 出 其 值 来 ， 里 面包 含 了 非常 丰富 的 地 
理 位 置信 息 。 


人 .4A 高 德 地 图 的 使 用 


本 节 我 们 将 向 读者 介绍 高 德 地 图 的 使 用 方法 ， 高 德 地 图 是 国内 领先 的 手机 地 图 服务 商 ， 其 提 
供 的 地 图 服务 技术 先进 、 性 能 优越 ， 为 设计 人 员 所 青睐 。 

下 面 这 个 高 德 地 图 应 用 ( 详 见 “4-5. 使 用 高 德 地 图 显示 用 户 当前 的 地 理 位 置 .html” 网 页 文 
件 ) 将 在 地 图 上 显示 用 户 当前 的 地 理 位 置 并 进行 标注 。 


【代码 4-5】 
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示例 效果 如 图 4.19 所 示 。 


D icea delecatin h * 
© 3 CC Dloclhoet/Ceolo-ation htm 


mn 





NR 5 
图 4.19 通过 Geolocation 接口 获取 经 纬度 并 显示 在 地 图 上 
浏览 器 的 Geolocation 对 象 有 如 下 3 个 方法 : 
@ ”getCurrentPosition: 获取 用 户 当前 的 位 置信 息 ， 只 能 获取 1 次 。 


@ watchPosition: 循环 检测 用 户 的 地 理 位 置 ， 只 要 发 生变 化 ,浏览 器 就 会 触发 
watchPosition 函数 。 


@ clearWatch: 清除 1 个 用 于 对 用 户 位 置 的 循环 监视 。 
getCurrentPosition 和 watchPosition 的 用 法 类 似 ， 语 法 如 下 : 
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, 
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geolocationOptions); 


geolocationSuccess 当 获 取经 纬度 信息 成 功 时 触发 ， 回 调 函 数 接收 1 个 带 有 用 户 信息 的 对 象 
， 包 含 两 个 属性 coords 和 timestamp， 其 中 coords 属性 对 象 包含 以 下 7 个 属性 值 : 


accuracy: 精确 度 。 

latitude: 纬度 。 

longitude: 经 度 。 

altitude: 海拔 ， 海 平面 以 上 以 米 计 。 
altitudeAccuracy: 海拔 的 精确 度 。 
heading: 朝向 ， 从 正 北 开始 以 度 计 。 
speed: 速度 ， 以 米 / 秒 计 。 


geolocationError 为 错误 回调 函数 ， 当 无 法 获取 用 户 经 纬度 时 ， 浏 览 器 会 触发 该 函数 ， 并 传 | 
错误 对 象 ， 具 体 可 能 出 现 的 错误 情况 可 以 参考 文档 http://dev.w3.org/geo/api/spec- 
source.html#permission_denied_error。 


geolocationOptions 参数 为 自 定义 的 对 象 字面 量 ， 拥 有 3 个 自 定义 属性 ， 具 体 如 下 : 


@ enableHighAccuracy: 返回 更 加 精确 的 用 户 信息 数据 ， 默 认为 false 关闭 ， 如 果 设 置 为 
true， 浏 览 器 将 消耗 更 多 的 时 间 用 于 获取 信息 ， 在 移动 设备 上 使 用 会 消耗 更 多 的 电量 。 

@ timeout: 浏览 器 获取 用 户 位 置信 息 的 超时 时 间 ， 默 认为 0。 

@ maximumAge: 浏览 器 获取 用 户 位 置信 息 后 的 缓存 时 间 ， 单 位 为 毫秒 ， 默 认为 0， 表 示 
每 次 都 重新 获取 。 


字面 


eeeeeee kn 





配 


处 .5 本章 小 结 


本 章 主要 介绍 了 HTML 5 地 理 位 置 定位 的 特性 ， 包 括 定位 、 追 踪 和 路 线 等 功能 ， 并 通过 多 
个 实际 范例 介绍 了 如 何 使 用 HTML 5 地 理 位 置 定位 的 方法 ， 希 望 对 读者 有 一 定 的 帮助 。 
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传统 的 Web 应 用 必须 建立 在 联网 的 基础 之 上 ，HTML 5 新 增 了 一 项 功能 ， 为 离线 Web 应 用 
的 开发 提供 了 可 能 性 。 假 设 用 户 使 用 在 线 的 记事 本 记录 信息 ， 忽 然 网 络 中 断 ， 对 于 传统 的 应 用 来 
说 用 户 很 可 能 会 丢失 先前 书写 的 内 容 。 如 果 使 用 离线 Web 功能 开发 的 应 用 ， 用 户 可 以 继续 离线 
添加 笔记 ， 待 网 络 重新 连接 后 将 离线 数据 同步 至 线 上 服务 。 

听 到 这 里 ， 读 者 一 定 会 对 这 个 功能 充满 好 奇 ， 在 开发 一 个 离线 应 用 时 ， 开 发 者 一 般 会 综合 使 
用 多 种 功能 ， 如 离线 资源 缓存 的 文件 列表 Manifest 文件 、 联 网 在 线 状 态 的 检测 、 离 线 状态 下 的 
本 地 数据 存储 ， 这 几 种 功能 缺 一 不 可 。 

本 章 将 会 介绍 离线 Web 应 用 相关 的 方法 接口 ， 同 时 让 读者 了 解 Manifest 文件 的 使 用 ， 最 后 
通过 例子 说 明 HTML 5 开发 离线 应 用 的 方法 。 





离线 缓存 应 用 


本 节 介绍 HTML 5 离线 缓存 基本 应 用 ， 包 括 离线 缓存 API 简介 、 使 用 Manifest 方法 、 使 用 
ApplicationCache API 方法 以 及 如 何 搭建 一 个 简单 的 离线 APP。 


5.1.1 ”离线 缓存 API 简介 


为 了 实现 离线 存储 功能 ，HTML 5 提供 了 Web 存储 相关 的 API， 即 Web Storage。Web 
Storage 包括 LocalStorage 和 SessionStorage 两 部 分 ， 可 用 于 对 离线 数据 的 短暂 性 或 永久 性 存储 。 

另外 ，HTML 5 另外 还 提供 了 一 套 基于 关系 型 的 数据 库 Web SQL Database， 可 以 支持 页 面 上 
复杂 数据 的 离线 存储 ， 例 如 可 以 存储 用 户 电子 邮件 信息 、 消 费 账 务 流水 信息 等 ， 同 时 Web SQL 
Database 还 加 入 了 传统 数据 库 的 事务 概念 ， 使 得 多 窗口 操作 可 以 保持 数据 一 致 性 。Web SQL 
Database 数据 库 是 基于 SQLite 开发 的 ， 与 Web Storage 中 的 LocalStorage 相同 。 

最 后 一 个 也 是 最 为 强大 的 功能 即 IndexedDB。IndexedDB 是 HTML 5 推出 的 一 种 轻 量 级 的 
NoSQL 数据 库 ， 即 常 说 的 非 关系 型 数据 库 。 与 传统 的 关系 型 数据 库 相 比 ，NoSQL 数据 库 具 有 易 
扩展 、 快 速 读 写 、 成 本 低廉 等 特点 ，HTML 5 的 IndexedDB 同时 还 包含 了 常见 的 数据 库 构 造 ， 如 
事务 、 索 引 、 游 标 等 ， 在 API 的 使 用 上 分 为 同步 和 异步 两 种 形态 。 下 面 通过 一 个 简单 的 示例 介 























四 区 第 5 章 ”移动 特性 4 一 -高 


绍 IndexedDB 的 使 用 ， 代 码 如 下 : 
【代码 5-1】 





将 代码 保存 至 以 html 为 后 级 的 文件 内 ， 部 署 在 Web 服务 器 上 ， 如 Apache、IIS、Nginx 等 ， 
使 用 最 新 的 Chrome 浏览 器 打开 文件 ， 然 后 打开 Chrome 浏览 器 的 开发 者 工具 ， 查 看 缓存 内 容 ， 
效果 如 图 5.1 所 示 。 


/ [Dlbcalhost9090/IndexedC x \ 用 于 
€ 3 © |@ localhosts090/indexedDB.html 六 | 辐 区 : 


民间 Hements Conscle Sources Network Timeline Applicaton » Bie 











Applcation 
本 Manifez 
入 Sevice Workers 


IndexedDB 























图 5.1 使 用 最 新 版 Chrome 浏览 器 打开 示例 文件 
点 击 左 侧 列表 中 的 Html5IndexedDB 项 ， 显 示 数 据 库 中 的 插入 信息 ， 效 果 如 图 5.2 所 示 。 
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[lecalhesto0s0/Indesed x 





2 © © localhost30s0/IndexadDE.html 











52 ”点 击 左 侧 列表 中 的 HtmlSIndexedDB 


点 击 左 侧 列表 中 的 users 项 ， 展 开 数据 库 中 users 键 的 存储 信息 ， 同 时 右 侧 区 域 出 现 对 应 键 
值 的 相关 存储 数据 ， 效 果 如 图 5.3 所 示 。 


DD ecainoseso9o/ndenedc x 


€ © | © localhost9090/Indered 





图 5.3 点 击 左 侧 列表 中 的 users 项 


示例 代码 中 监听 的 upgradeneeded 事件 在 每 次 新 建 数据 库 结构 时 触发 ， 当 再 次 打开 数据 库 时 
不 触发 该 事件 ， 而 触发 success 事件 。 方 法 createObjectStore 用 于 创建 对 象 的 存储 空间 ， 在 示例 
中 请 求 申请 1 个 名 为 “users” 的 对 象 空间 ， 同 时 传递 的 第 2 个 参数 保证 了 存储 空间 中 每 个 单独 
的 对 象 都 是 唯一 的 ， 被 存储 于 空间 中 的 所 有 对 和 象 都 必须 存在 于 “html5” 中 。 另 外 ， 还 可 以 看 到 
使 用 了 方法 createIndex， 用 于 创建 数据 库 索引 。 示 例 中 对 “name” 和 “id” 两 个 属性 添加 了 索 
引 ， 但 在 unique 属性 上 稍 有 不 同 ,“id” 对 应 的 unique 为 tue， 表 示 该 键 值 所 存储 的 数据 具有 唯 
一 性 ， 无 法 插入 重复 数据 ， 而 “name ”的 unique 为 false， 表 示人 允许 插入 的 用 户 信息 数据 相同 。 
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5.1.2 使 用 Manifest 方法 


Manifest 文件 是 在 HTML 5 离线 缓存 功能 中 引入 的 非常 重要 的 一 项 ， 表 示 Web 应 用 存储 可 
以 进行 文件 的 离线 缓存 ， 即 使 在 没有 因特网 的 情况 下 也 可 以 访问 内 容 ， 同 时 可 以 让 加 载 资 源 变 得 
更 快 ， 已 经 缓存 的 内 容 不 会 再 发 生 任何 请 求 ， 减 少 了 服务 器 的 负载 压力 。 另 外 ， 只 需要 从 服务 器 
上 下 载 最 新 Manifest 文件 就 能 对 已 有 资源 进行 更 新 。 

Manifest 文件 只 是 一 个 单纯 文本 文件 ， 结 构 非常 简单 ， 大 致 可 分 为 4 个 部 分 : 


@ CACHE MANIFEST: MANIFEST 文件 顶部 必须 出 现 的 标题 。 

@ CACHE: 在 此 标题 下 方 出 现 的 文件 将 在 首次 下 载 后 进行 缓存 。 

@ NETWORK: 在 此 标题 下 方 出 现 的 文件 需要 与 服务 器 连接 ， 且 不 会 被 缓存 。 
@ FALLBACK: 在 此 标题 下 方 出 现 的 文件 规定 当 页 面 无 法 访问 时 的 回 退 页 面 。 


一 个 简单 的 Manifest 文件 格式 如 下 : 





文件 名 出 现在 CACHE 下 方 后 一 直 都 会 被 缓存 ， 除 非 发 生 以 下 情况 浏览 器 才 会 再 次 更 新 : 


@ 浏览 器 的 缓存 被 清空 ， 如 用 户 手动 清空 缓存 。 
@ Manifest 文件 被 修改 。 
@ ”应 用 程序 脚本 更 新 缓存 。 


换 句 话说 ， 如 果 不 发 生 上 面 出 现 的 情况 ， 即 使 开发 者 将 服务 器 端的 文件 进行 更 新 ， 用 户 浏览 
器 内 使 用 的 内 容 也 不 会 发 生变 化 ， 如 果 要 对 应 用 的 文件 进行 更 新 ， 这 时 必须 要 做 的 就 是 更 新 
Manifest 文件 。 

使 用 Manifest 缓存 功能 时 ， 需 要 注意 以 下 问题 : 


@ 如果 Manifest 文件 中 的 某 行 数据 不 能 被 下 载 ， 更 新 过 程 将 失败 ， 浏 览 器 继续 使 用 老 缓 
存 数据 。 

@@ Manifest 文 件 必须 与 主页 面 同 源 。 

Manifest 文件 列表 中 的 文件 地 址 为 相对 路 径 ， 以 Manifest 为 参照 物 。 

@ 。 CACHE MANIFEST 标题 只 允许 出 现在 第 1 行 ， 且 必须 存在 。 
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@ ”使 用 Manifest 缓 看 功能 的 页 面 会 被 认为 是 自动 进行 缓存 。 








| Manifest 除了 本 节 介绍 的 注意 事项 外 ， 还 有 其 特殊 的 加 载 流程 ， 其 他 注意 事项 可 以 参考 网 址 
[ https://developer.mozilla.org/zh-CN/docs/HTML/Using_ the_application cache。 














5.1.3 使 用 ApplicationCache API 方法 


5.1.2 小 节 提 到 了 使 用 Manifest 文件 对 Web 应 用 进行 离线 缓存 ， 更 新 缓存 时 一 般 需 要 对 服务 
器 端的 Manifest 文件 进行 更 新 ， 还 有 一 种 方法 就 是 使 用 浏览 器 提供 的 ApplactionCache 应 用 接 
口 ， 通 过 JavaScript 操作 ApplactionCache 对 象 达 到 更 新 缓存 的 目的 。ApplactionCache 一 共有 以 
下 3 种 方法 : 


@ ”update: 发 起 应 用 缓存 下 载 进程 ， 尝 试 更 新 缓存 。 
@ ”abort: 取消 正在 进行 的 缓存 更 新 下 载 。 
@ 。 swapcache: 更 新 成 功 后 ， 切 换 为 最 新 的 缓存 环境 。 


ApplactionCache 对 象 上 还 有 一 个 常用 的 属性 status， 该 属性 有 以 下 6 种 状态 : 


CHECKING: 检查 中 ， 状 态 值 为 2。 
DOWNLOADING: 下 载 中 ， 状 态 值 为 3。 
IDLE: 闲置 中 ， 状 态 值 为 1。 
OBSOLETE: 失效 ， 状 态 值 为 5。 
UNCACHED: 未 缓存 ， 状 态 值 为 0。 
UPDATEREADY: 已 更 新 ， 状 态 值 为 4。 


使 用 Manifest 功能 进行 文件 缓存 后 ， 在 每 次 更 新 Manifest 文件 后 ， 第 1 次 刷新 时 页 面 中 的 


内 容 仍旧 是 老 的 缓存 内 容 ， 第 2 次 刷新 时 才 会 更 新 ， 不 过 ApplicationCache 为 开发 者 提供 了 一 种 
JavaScript 控制 的 可 能 性 。 表 5-1 列 出 了 目前 主流 浏览 器 对 ApplicationCache 的 支持 情况 。 


表 5-1 主流 浏览 器 对 ApplicationCache 的 支持 情况 

















浏览 器 

Chrome 4.0 十 
| Firefox i | 
| Internet Explorer 10+ | 
| Opera 10.6+ | 
[ safari 4.0+ | 





5.1.4 搭建 简单 的 离线 APP 
本 小 节 通 过 一 个 简单 的 缓存 更 新 示例 介绍 Manifest 和 ApplicationCache 的 使 用 。 在 使 用 
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Manifest 文件 之 前 ， 首 先 要 确保 Web 服务 器 对 文件 进行 正确 的 解析 。 以 Apache 为 例 ， 需 要 在 相 
应 的 httpd.conf 配置 文件 中 添加 如 下 代码 配置 信息 : 


下 面 以 Chrome 作为 演示 浏览 器 ， 不 过 有 的 Chrome 版 本 会 默认 关闭 ApplicationCache 功 
能 ， 这 时 需要 进入 Chrome 浏览 器 实验 室 开启 ApplicationCache 功能 ， 如 图 5.4 所 示 。 


st chrome://flags 
€ CD chrone://flags 安 @oz= 








局 | 实 族 Mac, WWindows, Linux Chrome 0S,Android 


用 实验 性 WebSocket 
使 用 实验 性 WebSocket 实施 。 
让 里 


关注 区 域 的 图 块 数 上 限 Un chmeDs sndrog 
指定 关注 区 域 的 图 块 数 上 限 。 
把 区 ， 此 实验 无 法 在 乱 的 平台 上 进行 


启用 高 线 织 存 模式 Mac, Windows, Linux Chrome 0S, Android 
要 读 取 的 网 络 资源 若 无 法 访问 ， 则 从 已 过 时 的 现 有 缓存 条 目 | 
信用 

默认 图 块 赛 度 Mac, Windows, Linux, Chrome OS, Androld 
指定 默认 图 块 赛 度 、 


默认 图 块 高 度 Mac, Windows, Linux Chrome 0S, Android 
指定 寺 认 图 块 高 度 。 





图 5.4 开启 Chrome 浏览 器 ApplicationCache 功能 


示例 中 的 Manifest 文件 application.Manifest 的 代码 如 下 : 





示例 主页 面 代码 如 下 : 
【代码 5-2】 
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将 主页 面 文件 部 署 在 配置 完毕 的 Apache 服务 器 上 ， 使 用 开启 ApplicationCache 功能 的 
Chrome 浏览 器 访问 示例 页 面 ， 同 时 打开 开发 者 工具 查看 控制 台 信 息 ， 效 果 如 图 5.5 所 示 。 


圈 1ocahostwyhpplicationc， x 
€ 全 CC D1localhost/ApplicationCache. htn 








懈 ， 
看 


Elements Resources Network Sources Timeline Profiles 
Document was loaded from Application Cache with m: 
http://10calhost/ApplicationCache/application. ct 
Application Cache Checking event 
Application Cache Downloading event 
Application Cache Progress event (© of 4) http://localhost/ApplicationCache/demo. css 
Application Cache Progress event (1 of 4) http://localhost/ApplicationCache/deno. ipg 
Application Cache Progress event (2 of 4) http://localhost/ApplicationCache/deno. is 
Application Cache Progress event (3 of 4) http://localhost/ApplicationCache, htm 
Application Cache Progress event (4 of 4) 
Application Cache UpdateReady event 

?| 





上 ,= A <topfnme> w GD | Eror Waming; Log; Debug 


图 5.5 使 用 Chrome 浏览 器 打开 ApplicationCache 示例 


在 开发 者 工具 的 控制 台 信息 中 可 以 看 到 浏览 器 的 整个 执行 过 程 ， 首 先 下 载 html 标签 中 
Manifest 属性 对 应 的 Manifest 文件 ， 然 后 将 Manifest 中 CACHE 标签 下 的 文件 连同 主页 面 一 同 进 
行 缓存 。 接 下 来 修改 demojs， 添 加 1 行 代码 : 
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再 更 新 application.Manifest 文件 ， 将 第 2 行 的 v1 变 为 v2， 代码 如 下 : 





点 击 页 面 中 的 “更 新 缓存 manifest 文件 ”按钮 ， 浏 览 器 启动 缓存 进程 更 新 CACHE 标签 下 的 
内 容 ， 重 新 刷新 页 面 ， 待 页 面 加 载 完毕 后 弹出 内 容 为 “update” 的 提示 框 ， 效 果 如 图 5.6 所 示 。 


人 loecalhost/Applicationc。X 
€ 3X D1localhost/ApplicationCache. hta 








st 上 的 网 页 明示 


Elements Resources Network Sources Timeline Profiles Audits 


Document was loaded from Application Cache with manifest 
http://localhost/ApplicationCache/application. manifest 





Application Cache Checking event 
Application Cache NoUpdate event 
> 





BE A © <topfnme>v ED | Emor Wanings Log Debug 


图 5.6 重新 刷新 页 面 
在 Chrome 下 可 以 通过 访问 “chrome://appcache-internals/” 查 看 浏览 器 缓存 的 内 容 ， 本 示例 


的 缓存 信息 效果 如 图 5.7 所 示 。 








» Size: 33.4 kB 
。 Creation Tine: 2016 年 6 月 24 日 星期 五 下 午 3:25:46 
。 Last Update Tine: 2016 年 6 月 24 日 星期 五 下 午 3:25:46 
。 Last Access Time: 2016 年 6 月 24 日 星期 五 下 午 3:26:57 





5.7 示例 缓存 数据 内 容 
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点 击 “View Entries” 文 字 链 接 ， 展 开 被 缓存 的 地 址 链接 和 缓存 内 容 的 大 小 ， 效 果 如 图 5.8 所 示 。 





。 Size: 33.4 kB 

。 Creation Time: 2016 年 6 月 24 日 星期 五 下 午 3:25:46 
。Last Update Tine: 2016 年 6 月 24 日 星期 五 下 午 3:25:46 
。 Last Access Tine: 2016 年 6 月 24 日 星期 五 下 午 3:26:57 


ee Mt a 
Master, http://localhost/ApplicationCache. ht 1.0kB 
Nanifest, e ic 时 ion nani1 382 6 
Explicit，http://loc /deno. 274B 
Explicit, http://localhost/ApplicationCache/deno, ipg 31.4 kB 
Explicit, http://localhost/ApplicationCache/deno. is 306 B 





5.8 点 击 “View Entries” 文 字 链 接 








在 Firefox 中 可 以 通过 访问 aboutcache 页 面 (在 “离线 缓存 设置 ”标题 下 ) 来 检查 离线 缓存 
[ 的 当前 状况 。 








与 . 2 离线 事件 处 理 


现今 的 Web 世界 正在 向 传统 桌面 应 用 挑战 ， 页 面 变 得 越 来 越 复杂 ， 功 能 也 变 得 越 来 越 多 ， 
SPA (Single Page Application， 独 立 页 面 应 用 ) 开发 也 变 得 稀 玻 平常 ， 非 常 具 有 代表 性 的 应 用 如 
谷歌 的 Gmail、 腾 讯 的 WebQQ， 众 多 的 功能 被 集中 在 一 张 页面 完 成 。 面 对 如 此 庞大 的 功能 集 ， 
传统 页 面 的 加 载 性 能 面临 着 巨大 的 挑战 。HTML 5 带 来 了 Application Cache API， 提 供 了 一 系列 
新 特性 支持 离线 引用 缓存 。 下 面 通过 在 示例 5-3“ 开 发 一 个 简单 的 离线 应 用 ”的 基础 上 添加 离线 
事件 处 理 功能 ， 介 绍 Application Cache API 相关 的 技术 和 知识 点 。 

首先 ， 将 本 例 页 面 文件 和 脚本 部 署 在 Web 服务 器 上 ， 如 Apache、IIS 或 者 Nginx 等 。 使 用 
Chrome 打开 本 例 页 面 地 址 ， 并 添加 若干 条 信息 ， 效 果 如 图 5.9 所 示 。 








© 添加 
姓名 性 别 年 芥 摊 作 
小 王 男 33 肌 泛 修改 
小 李 女 22 用 修改 
小 周 男 34 肌 放 修改 





图 5.9 使 用 Chrome 打开 本 例 页 面 地 址 
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首次 打开 页 面 ， 所 有 请 求 均 获 得 服务 器 响应 的 HTTP 状态 200 信息 ， 如 图 5.10 所 示 。 
I ee Ne ‘Ee GE Rauiis I console 





Eye (000.96ed96aercbed6e ddae ya. 

Djquery-ui-19.2.custom,css SET | 200 he 四 32.4KB 3ms 
gridess GET 200 totess 加 35KB 67ms 
DD jquery-18.3js GET 200 application/javascript 医 262KB 105mz 
jquery-ui-L92.customjs GET 200 application/javascript 454KB Lams 
口 mswebsatjs GET 200 application/javascript G4KB Ulms 
DD bartop.png GET 200 image/png 受 484B Blms 
口 bagf SET 200 image/gif 本 11K8 BOms 
回 addpng GET 200 image/png 加 11KB 16ms | 


图 5.10 页 面 


刷新 当前 页 面 ， 部 分 请 求 的 “Size” 区 域 标识 为 “from cache”， 表 示 该 条 请 求 数据 从 浏览 器 
内 部 缓存 中 获取 ， 同 时 请 求 耗 时 Time》 又 减 ， 如 图 5.11 所 示 。 


图 tmee 国 Reourees | 全 Na D8 sources (Timeine © profe Gaudi 四 co 
me Mehod | Sats [De [Se [Tme | 





1, Size Time 








口 008.xeg9kaestbe9be996ae36a.。 GET 200 ‘ted/html om cache) 4mz 
Djquery-ui-192.custom.css 。 GET 200 tot/css » (from cache) 15ms 
gridess GET 200 tot/css ~ (from cache) gms | 
DD jquery-18.3js GET ‘20 application/javascript (from cache) ms 
jquery-ui-19,2.customjs GET 200 application/javaseript (from cache) lbms | 
口 mawebsatjs GET 304 application/javascript 1958 32ms 
口 eggif GET 200 image/gif (from cache) ms 
辐 addpng GET 200 image/png wm (from cache) ms 
口 bartoppng GET 200 image/png from cache) ms 


图 5.11 刷新 当前 页 面 


更 新 “appcache.manifest” 文 件 ， 使 用 “#” 符 号 注释 “../js/jquery-ui-1.9.2.custom.js”， 保 存 
后 关闭 ， 修 改 后 的 代码 如 下 : 





ga 
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重新 刷新 页 面 ， 页 面 加 载 完毕 后 出 现 更 新 提示 框 ， 如 图 5.12 所 示 。 


提示 


是 天 更 新 缓存 文件 ? 


确认 取消 





图 5.12 修改 “appcache .manifest” 并 刷新 页 面 
点 击 “ 确 认 ” 按 钮 ， 页 面 被 刷新 ， 同 时 缓存 策略 更 新 ， 读 者 可 以 使 用 Chrome 的 开发 者 工具 
观察 此 时 的 请 求 变 化 。 
代码 的 功能 应 用 部 分 可 以 参考 示例 “5-3. 开 发 一 个 简单 的 离线 应 用 .html”， 下 面 列 出 主体 页 
面 的 结构 ， 代 码 如 下 : 


【代码 5-3】 
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首先 注意 到 ， 在 HTML 的 起 始 节点 上 增加 了 manifest 属性 ， 可 以 通过 相对 或 绝对 路 径 设 
置 ， 但 必须 保证 manifest 文件 与 当前 页 面 处 于 同一 域名 下 。manifest 指向 的 文件 可 以 是 任意 的 后 
级 ， 但 是 MIME Type 必须 是 text/cache-manifest。 如 果 使 用 的 是 Apache 服务 器 ， 可 以 在 Apache 
程序 目录 的 conf 文件 夹 内 找到 “mime.types” 文 件 ， 并 添加 1 行 信息 ， 用 于 对 manifest 后 级 文件 
的 支持 ， 代 码 如 下 : 


本 例 manifest 文件 “appcache.manifest” 的 代码 如 下 : 





文件 以 “CACHE MANIFEST” 开 头 ，CACHE 下 面 列举 的 文件 在 第 一 次 访问 以 后 会 被 浏览 
器 缓存 ，NETWORK 下 列举 的 文件 表示 除 CACHE 内 的 均 通过 网 络 下 载 ， 均 支持 通配符 选择 。 


画 Chrome 下 可 以 通过 访问 chrome://appcache-internals/ 来 查看 或 者 清除 离线 缓存 数据 。 


下 面 分 析 页 面 中 的 脚本 逻辑 ， 见 代码 第 12~30 行 。 
代码 第 13 行 监听 离线 缓存 对 象 applicationCache 的 updateready 事件 ， 当 manifest 文件 产生 
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变化 时 该 事件 被 触发 ， 通 过 applicationCache 的 status 属性 获取 离线 文件 的 缓存 状态 ， 所 有 缓存 
的 状态 如 下 : 


@ UNCACHED: 缓存 资源 未 被 完全 初始 化 。 

IDLE: 缓存 资源 不 在 被 更 新 的 过 程 中 。 

CHECKING: manifest 文件 正在 被 加 载 或 者 检查 是 否 已 更 新 。 
DOWNLOADING: 缓存 资源 正在 被 下 载 到 缓存 。 
UPDATEREADY: 存在 更 新 的 缓存 资源 。 

OBSOLETE: 缓存 资源 已 过 时 。 


本 例 判断 缓存 状态 是 否 为 “UPDATEREADY”， 当 确定 为 此 状态 时 ， 调 用 applicationCache 
的 swapCache 方法 ， 用 新 文件 替换 老 缓存 文件 。 











! 有 关 ApplicationCache 对 象 的 swapCache 方法 使 用 的 详细 使 用 说 明 可 参考 网 址 
| http:/www.w3.org/TR/2011/WD-html5-20110525/offline.html#dom-appcache-swapcache。 











久 .也 范例 一 离线 贴吧 APP 


本 例 将 结合 之 前 所 用 的 离线 应 用 知识 实现 一 个 可 在 离线 环境 使 用 的 留言 网 页 ， 进 一 步 展 现 
Web SQL 在 日 常 开发 中 的 使 用 。 
使 用 Chrome 浏览 器 打开 网 页 文件 ， 运 行 效果 如 图 5.13 所 示 。 





| ] 
5.13 ”使 用 Chrome 打开 网 页 文件 


在 没有 输入 任何 内 容 时 ， 点 击 “ 留 言 ” 按 钮 ， 输 入 框 下 方 会 出 现 红 色 的 提示 信息 “请 填写 留 
言 内 容 ”， 效 果 如 图 5.14 所 示 。 











请 博 写 留言 内 容 
图 5.14 不 输入 内 容 直 接点 击 “ 留 言 ”按钮 


在 输入 框 中 输入 内 容 “ 开 发 一 个 离线 留言 网 页 ” 点击“ 留言” 按钮 ， 提 交 成 功 后 下 方 会 出 
现 刚才 输入 的 留言 信息 ， 并 附 上 随机 生成 的 头像 和 用 户 名 ， 效 果 如 图 5.15 所 示 。 
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四 | 和 A 
陋 生 人 0 2016 年 6 月 30 日 下 午 07; 12: 15 
。 开发 一 个 离线 留言 网页 


图 5.15 输入 信息 并 点 击 “ 留 言 ”按钮 
重复 多 次 刚才 的 留言 操作 ， 效 果 如 图 5.16 所 示 。 


了 四 [A 
陋 生 人 2 2016 年 6 月 30 日 下 午 07: 12:39 

测 式 高 线 留 言 网 页 
陋 生 人 0 2016 年 6 月 30 日 下 午 07: 12; 27 

， 再 式 训 线 留 言 网 页 


陋 生 人 0 2016 年 6 月 30 日 下 午 07; 12: 15 
。 开发 一 个 离线 留言 网 页 


图 5.16 多 次 重复 留言 操作 
打开 “5-4. 开 发 一 个 离线 留言 网 页 .html” 页 面 文 件 ， 示 例 代码 如 下 : 
【代码 5-4】 
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函数 build_item 主要 完成 构建 单条 留言 DOM 结构 ， 值 得 注意 的 是 ， 在 每 次 构建 完毕 后 
都 会 将 最 新 的 行 容器 赋予 变量 first_item_el， 以 确保 每 次 添加 至 留言 列表 的 第 1 行 ， 见 代码 第 
48~55 行 。 

函数 store_data 完成 将 接收 的 数据 存储 至 Web SQL 中 ， 每 次 新 增 1 条 数据 都 会 返回 自 增 ID 
主键 ， 将 该 主键 ID 数据 赋予 传 入 的 数据 参数 对 象 data 中 ， 并 提交 给 build_item 方法 泻 染 1 条 新 
的 留言 ， 见 代码 第 56~66 行 。 

show_error tip 函数 用 于 实现 错误 提示 功能 ， 并 在 提示 出 现 后 的 1500 毫秒 自动 隐藏 提示 信 
息 。 留 言 按钮 的 点 击 事件 监听 由 代码 第 72~82 行 完成 ， 点 击 留言 按钮 后 ， 首 先 会 判断 是 否 在 输 
入 框 中 输入 留言 信息 ， 输 入 内 容 会 被 tim 方法 去 除 头 尾 的 空格 符 ， 确 保 输入 内 容 真 实 有 效 。 

每 次 刷新 页 面 ， 脚 本 都 会 自动 从 Web SQL 中 读 取 历史 留言 信息 并 进行 泻 染 ， 同 时 对 于 
第 1 次 进入 页 面 的 用 户 ， 会 在 浏览 器 中 自动 创建 一 张 用 于 存放 留言 信息 的 数据 表 ， 见 代码 第 
84~97 行 。 


be 区 本 例 中 使 用 的 Web SQL 只 是 HTML 5 中 的 冰山 一 角 ， 浏 览 器 客户 端 数据 库 还 有 更 多 的 功能 | 
醒 等 待 读者 去 发 现 ， 详 情 可 参考 网 址 htp:/www.w3.org/TR/webdatabase/。 





与 .人 本 章 4 结 


本 章 主要 介绍 了 HTML 5 离线 存储 的 特性 ， 包 括 LocalStorage、SessionStorage 和 Web SQL 
Database 等 方面 的 内 容 ， 并 通过 一 个 实际 范例 介绍 了 如 何 使 用 HTML 5 离线 存储 的 方法 ， 希 望 对 
读者 有 一 定 的 帮助 。 
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HTML 语言 经 过 20 多 年 的 发 展 ， 现 今 已 经 成 长 为 编程 最 广泛 的 语言 ， 在 互联 网 上 随处 可 
见 ， 虽 然 HTML 具备 很 多 优点 ， 但 是 始终 没有 完全 解决 图 形 绘制 问题 ， 并 且 没 有 提供 一 个 成 熟 
的 解决 方案 ， 这 也 是 Flash 仍然 在 互联 网 领域 一 息 尚 存 的 根源 。 

在 HTML 5 出 现 之 前 ，HTML 已 经 存在 一 些 技术 可 以 绘制 图 形 ， 常 用 的 基于 XML 的 技术 绘 
制 ， 如 VML 和 SVG， 都 能 够 良好 地 支持 矢量 图 形 在 Web 页 面 上 的 显示 ， 同 时 提供 一 些 事 件 和 
动态 机 制 。HTML 5 Canvas 出 现 后 ， 从 一 个 侧面 弥补 了 过 去 的 不 足 ， 基 于 画布 的 绘制 ， 让 开发 者 
更 容易 操作 页 面 上 的 像素 级 内 容 。 不 过 由 于 历史 原因 ， 市 面 上 各 种 浏览 器 的 兼容 情况 不 同 ， 对 于 
要 求 兼容 众多 浏览 器 和 终端 设备 的 应 用 ， 可 以 通过 浏览 器 类 型 判断 ， 如 VML 在 Internet Explorer 
在 使 用 ， 其 他 不 支持 Canvas 的 浏览 器 采用 SVG， 推 荐 使 用 第 三 方 开源 类 库 解 决 图 形 绘制 问题 ， 
如 Raphael 图 形 类 库 和 本 节 将 要 介绍 的 Paperjs 矢量 图 形 类 库 。 








HTML 5 的 绘图 API 


本 节 我 们 介绍 HTML 5 绘图 API 的 基础 知识 ， 包 括 Canvas、SVG、WebGL 和 Paperjs 等 内 
容 ， 是 HTML 5 绘图 的 入 门 学 习 。 


6.1.1 什么 是 Canvas 


Canvas 是 HTML 5 新 增 的 元 素 特性 ， 允 许 脚 本 语言 动态 泻 染 绘制 图 形 ， 如 用 Canvas 画图 、 
合成 图 像 或 者 制作 动画 。 

Canvas 最 早 由 苹果 公司 的 Mac OS X Dashboard 引入 ， 后 来 被 内 置 于 Safari 浏览 器 内 。 之 后 
在 Firefox、Opera、Chrome 的 推动 下 ，Canvas 由 W3C 纳 为 HTML 5 的 一 部 分 。Internet Explorer 
在 Canvas 的 支持 上 仍然 比 其 他 浏览 器 慢 了 一 步 ， 直 到 Internet Explorer 9 才 开 始 支 持 Canvas 
元 素 。 











及 元 | 要 了 解 苹果 公司 的 Mac OS X Dashboard， 可 以 前 往 网 站 http://www.apple.com/macosx/features/ 
| dashboard/。 
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Canvas 由 绘制 区 域 HTML 代码 的 属性 决定 宽 高 ， 同 时 JavaScript 可 以 访问 Canvas 元 素 | 
域 ， 通 过 Canvas 提供 的 一 套 完成 绘图 应 用 程序 接口 生成 图 形 。Canvas 与 VML 和 SVG 最 大 的 
别 在 于 ，Canvas 有 一 套 完全 基于 JavaScript 脚本 语言 绘制 的 应 用 程序 接口 ， 而 VML 和 SVG 使 
用 XML 文档 描述 绘制 图 形 。 

HTML 5 出 现 后 ， 在 图 形 绘制 使 用 方面 ， 开 发 者 一 直 都 拿 SVG 与 Canvas 进行 比较 。 两 项 技 
术 的 对 比如 表 6-1 所 示 。 


区 | 区 | 





表 6-1 SVG 与 Canvas 对 比 
SMA Canvas 


与 分 尖 率 无 关 ， 放 大 或 缩小 图 形 像 质 不 会 下 降 可 以 控制 画布 上 的 每 个 像素 ， 绘 制 出 的 是 位 图 
多 个 元 素 节 点 


图 形 允 许 CSS 和 脚本 修改 图 形 完全 由 脚本 修改 
对 动画 支持 较 容易 ， 可 以 通过 SVG 语法 描述 制作 动画 时 需要 不 断 重复 绘制 画面 
导出 图 片 需要 借助 其 他 技术 实现 可 以 方便 地 直接 从 页 面 导 出 jpg 或 png 格式 图 片 





技术 的 选择 对 于 开发 后 期 的 维护 起 到 了 至 关 重 要 的 作用 。 通 常情 况 下 ， 当 应 用 需要 处 理 点 阵 
图 时 ， 如 切割 图 片 、 去 除 红眼 ， 请 选择 使 用 Canvas。 如 果 想 开发 一 款 对 速度 要 求 较 高 的 网 页 游 
戏 ， 也 可 以 选择 使 用 Canvas， 如 比较 著名 的 游戏 Cut The Rope 中文 名 “ 制 绳子 ”) 使 用 Canvas 
开发 了 一 个 测试 版 本 ， 地 址 为 http://www.cuttherope.ie/。 但 是 遇 到 一 些 数据 可 视 化 的 图 表 时 ， 要 
求 图 形 能 在 不 同 分 辨 率 下 正常 显示 ， 就 应 使 用 SVG 了 ， 若 这 时 仍 使 用 Canvas 开发 则 不 是 一 个 明 
智 的 选择 。 


6.1.2 ”加载 Canvas 
Canvas 在 页 面 上 的 使 用 从 元 素 定义 开始 ， 代 码 如 下 : 


<canvas width="150" height="150"></canvas> 


Canvas 元 素 拥 有 width 和 height 两 个 属性 ， 均 可 选 ， 并 且 可 以 用 DOM 属性 或 者 CSS 来 设 
置 。 如 果 不 指定 宽 高 ， 就 会 默认 为 宽 300 像素 、 高 150 像素 。 通 过 CSS 设置 Canvas 的 宽 高 有 时 
会 出 现 泻 染 变形 ， 建 议 设置 Canvas 的 width 和 height 属性 。 

很 多 老 一 代 的 浏览 器 不 支持 Canvas， 这 时 需要 对 不 支持 Canvas 的 浏览 器 做 出 提示 。 提 示 的 
设置 非常 简单 ， 只 需要 在 Canvas 的 元 素 内 插入 提示 文本 内 容 ， 不 支持 Canvas 的 浏览 器 就 会 将 其 
识别 为 未 知 标签 兼容 演 染 成 为 文字 信息 ， 而 支持 Canvas 的 浏览 器 就 会 做 出 正确 的 泻 染 ， 代 码 如 
下 : 

<canvas width="150" height="150"> 您 的 浏览 器 不 支持 canvas， 请 升级 后 再 使 用 ! </canvas> 


当 Canvas 被 添加 到 页 面 上 后 ， 初 始 化 演 染 是 空白 的 。 想 要 在 上 面 通过 脚本 进行 图 形 绘制 首 
先 需 要 获得 泻 染 的 上 下 文 ， 通 过 Canvas 元 素 对 象 的 getContext 方法 获得 。 
下 面 给 出 使 用 Canvas 绘制 一 个 矩形 的 示例 。 
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【代码 6-1】 





示例 的 运行 效果 如 图 6.1 所 示 。 


和 之 CGID:le:// 六 | 人 @@ 三 





图 6.1 使 用 Canvas 绘制 一 个 矩形 





6.1.3 什么 是 SVG 


SVG (Scalable Vector Graphics， 可 缩放 矢量 图 形 ) 是 基于 XML 〈 可 扩展 标记 语言 ) 用 来 描 
述 二 维 矢量 图 形 的 一 种 图 形 格式 。SVG 诞生 于 2000 年 8 月 ， 由 W3C (国际 互联 网 标准 组 织 ) 
制定 ， 由 于 采用 文本 格式 的 描述 性 语言 来 浑 染 图 片 ， 因 此 产生 的 图 片 和 图 像 分 辩 率 无 关 ， 即 使 缩 
放 图 形 像 质 也 不 会 下 降 。SVG 有 如 下 优点 : 


@ 基于 XML， 继 承 了 XML 跨 平 台 和 可 扩展 的 特性 。 
@。 采用 文本 描述 图 形 对 象 ， 利 于 搜索 引擎 通过 文本 内 容 搜索 图 片 信息 。 
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@ ”良好 的 交互 和 动态 特性 ， 可 以 在 其 中 嵌入 动画 ， 通 过 脚本 收缩 、 旋 转调 整 图 形 .。 

@ 对 DOM 支持 完整 ， 可 以 通过 脚本 获取 元 素 、 监 听 元 素 事件 。 

@ 体积 小 下 载 快 ， 与 GIF 和 JPG 格式 的 图 片 相 比 具有 较 小 的 体积 ， 在 互联 网 上 传输 有 明 
显 优势 。 

SVG 并 不 是 本 书 的 重点 ， 所 以 下 面 通过 一 个 简单 的 示例 来 介绍 SVG 的 初步 功能 。 


【代码 6-2】 





以 svg 为 后 缀 保存 文件 ， 使 用 Chrome 浏览 器 打开 ， 效 果 如 图 6.2 所 示 。 





图 6.2 使 用 SVG 画 圆 


示例 代码 虽然 简单 ， 但 是 包含 了 很 多 比较 陌生 的 属性 和 节点 信息 。 

第 01 行 定义 了 XML 文件 的 声明 。 这 里 有 一 个 很 关键 的 属性 standalone， 表 示 该 SVG 文件 
是 否 引 用 外 部 文件 ， 在 示例 中 被 赋值 为 no 意味 着 该 文件 会 引用 一 个 外 部 文件 ， 地 址 为 

“http://www.w3.0rg/Graphics/SVG/1.1/DTD/svg11.dtd”。 

上 面 提 到 的 DTD 文件 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” 主 要 用 于 SVG 
规范 ， 里 面包 含 了 所 有 SVG 允许 使 用 的 元 素 。 

第 03 行 是 整个 绘图 SVG 文件 的 根 元 素 svg， 类 似 于 HTML 文件 中 的 html 根 元 素 。width 和 
height 属性 定义 SVG 的 宽 、 高 ，version 属性 定义 SVG 的 版 本 ，xmlns 属性 定义 SVG 的 命名 
空间 。 

第 04 行 circle 元 素 用 来 创建 一 个 圆 。cx 和 cy 属性 定义 圆 中 心 的 x 和 y 轴 坐 标 ， 默 认 设 置 均 
为 0。r 属性 用 来 定义 圆 的 半径 。stroke 和 stroke-width 属性 用 来 设置 显示 图 形 的 轮廓 ， 示 例 
stroke 被 设置 为 黑色 边框 ，stroke-width 被 设置 为 2 像素 的 边框 。fill 属性 用 来 设置 图 形 内 填充 的 
颜色 。 
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画 所 有 标签 的 规则 必须 严格 遵循 W3C 规范 ， 开 启 标签 必须 有 对 应 的 闭合 标签。 | 














6.1.4 什么 是 WebGL 


WebGL 规范 由 Khronos Group 协会 在 2011 年 3 月 的 美国 洛杉矶 举办 的 游戏 开发 大 会 上 发 
布 ， 允 许 把 JavaScript 和 OpenGL ES 2.0 相 结 合 为 HTML 5 Canvas， 提 供 硬 件 3D 加 速 泻 染 ， 使 
开发 人 员 可 以 借助 系统 显卡 在 浏览 器 里 展现 3D 场景 和 模型 ， 使 用 者 可 以 在 不 安装 插件 的 情况 下 
体验 3D 图 形 技 术 。 






: Khronos Group 成 立 于 2000 年 1 月 ， 由 3Dlabs、ATI、Discreet、Evans & Sutherland、Intel、 
Nvidia、SGI 和 Sun Microsystems 在 内 的 多 家 国际 知名 多 媒体 行业 领导 者 创立 ， 致 力 于 发 展开 放 
| 标准 的 应 用 程序 接口 ， 以 实现 在 多 种 平台 和 终端 设备 上 的 富 媒体 创作 、 加 速 和 回放 。 








目前 WebGL 标准 已 经 在 Firefox、Safari、Chrome 浏览 器 上 得 到 支持 ， 微 软 将 在 Intemet 
Explorer 11 中 加 入 WebGL 功能 。 相 信 不 久 的 将 来 开发 者 可 以 通过 WebGL 展现 各 种 3D 模型 和 场 
景 ， 推 出 更 多 基于 3D 的 网 站 和 游戏 。 

对 于 Web 开发 者 来 说 ，WebGL 提供 了 前 所 未 有 的 想象 空间 ， 打 开 了 一 个 面向 3D 技术 的 新 
领域 ， 无 须 借助 Flash 或 Silverlight 等 浏览 器 插件 也 能 制作 出 丰富 的 视觉 交互 体验 。 目 前 已 经 涌 
现 出 很 多 使 用 WebGL 技术 开发 的 非常 厉害 的 作品 。 

谷歌 推出 了 WebGL 版 的 Google Map， 用 户 可 以 从 https://maps.google.com/ 查 看 。 进 入 网 站 
后 ， 网 页 会 判断 浏览 器 支持 WebGL 的 情况 ， 当 确认 用 户 的 浏览 器 支持 WebGL 时 页 面 左 侧 会 出 
现 提示 ， 如 图 6.3 所 示 。 


™ Wanttotry something new? 去 


» Take MapsGL, our new experimental maps 
experience, for a spin 

» 3D buildings and seamless 45° aerial view 
rotations 

‘Swoop’ quickly fom the map view to Street View 
imagery, without a plugin 


MapsGL is our experimental Maps technology 
powered by WebGL, and has certain system 
requirements. 


Enabling 


6.3 谷歌 地 图 开启 WebGL 功能 提示 


使 用 了 WebGL 技术 后 ， 地 图 效果 得 到 极 大 的 提升 ， 增 加 了 3D 图 形 显 示 ， 地 图 拖 动 切换 更 
加 平滑 ， 同 时 还 带 有 45 度 的 视角 旋转 功能 。 
另外 ， 谷 歌 还 在 Chrome 实验 室 里 提供 了 很 多 WebGL 的 实验 产品 ， 让 人 叹为观止。 要 欣赏 
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作品 可 前 往 站 点 http:/www.chromeexperiments.com/webgl。 其 中 有 一 款 关 于 Google Maps 的 游 
戏 ， 相 信 一 定 会 让 用 户 眼前 为 之 一 亮 ， 游 戏 地 址 为 http://www.playmapscube.com/， 截 图 如 图 6.4 
所 示 。 





图 6.4 Google Maps 地 图 小 游戏 


6.1.5 “Paperjs 图 形 库 


Paperjs 是 一 个 开源 的 矢量 图 形 脚本 框架 ， 基 于 HTML 5 Canvas 开发 ， 提 供 了 清晰 的 场景 图 
和 文档 对 象 模型 ， 还 有 许多 强大 的 功能 用 来 创建 和 使 用 矢量 图 形 和 贝 塞 尔 曲线 ， 接 口 设计 精巧 、 
规范 并 且 干净 。 

Paperjs 的 中 文教 程 目前 还 很 少 ， 所 以 使 用 者 需要 前 往 官网 http:/paperjs.org 的 英文 版 教程 学 
习 使 用 ， 这 对 一 般 的 使 用 者 是 一 个 挑战 ， 不 过 作为 一 名 合格 的 前 端 工作 者 ， 习 惯 阅读 外 文 站 点 也 
是 工作 的 一 部 分 。 下 面 通过 一 个 示例 了 解 使 用 Paperjs， 开 发 使 用 Canvas 的 图 形 绘制 应 用 。 


【代码 6-3】 





移动 特性 5 一 一 Canvas 绘图 











点 击 页 面 某 个 区 域 ， 按 住 鼠 标 进行 拖 动 ， 将 会 以 点 击 点 为 圆心 、 拖 动 距离 为 半径 画 圆 ， 松 开 
鼠标 后 圆 形 绘制 完毕 。 图 6.5 为 测试 后 绘制 的 效果 图 。 


© 


图 6.5 ”使 用 Paperjs 示例 绘制 效果 图 


Paperjs 项 目 同 时 还 被 发 布 在 GitHub 上 ， 了 解 开发 者 最 新 发 布 动态 可 以 前 往 GitHub， 项 目地 


址 为 htpsWgithub.comy/paperjspaperjs。 





6.2 应 用 Canvas 


本 节 我 们 介绍 HTML 5 核心 的 绘图 控件 Canvas。 绘 图 <canvas> 标 签 用 于 定义 图 形 ， 比 如 图 
表 图 像 等 ， 是 HTML 5 标准 新 提供 的 绘图 容器 。 
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6.2.1 绘制 图 形 


画图 软件 已 经 不 再 是 本 地 应 用 的 专利 了 ， 越 来 越 多 的 网 站 提供 了 在 线 版 的 画图 应 用 。 有 的 通 
过 Flash 实现 ， 有 的 通过 HTML 5 实现 。 本 例 给 出 了 HTML 5 实现 的 简单 画板 。 画 板 分 成 两 个 部 
分 ， 第 1 部 分 为 矩形 ， 第 2 部 分 为 圆 形 。 两 部 分 都 有 1 个 调节 区 和 1 个 画布 区 。 画 布 区 默认 绘制 
1 个 对 应 图 形 ， 调 整 颜色 控件 或 拖 动 滑 块 同步 作用 于 绘制 的 图 形 。 通 过 本 示例 可 以 了 解 Canvas 
图 形 绘制 接口 的 使 用 。 

使 用 Chrome 浏览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.6 所 示 。 


矩形 圆 形 

je, 颜色 ， 国 到 

病 , 一 一 二 一 观 : 一 一 人 一 一 
磺 , 一 一 上 一 一 现 : 一 一 人 一 一 
个 
高 度 ， 一 睹 一 一 一 


加 四 


图 6.6 使 用 Chrome 打开 网 页 文件 


点 击 “ 和 矩形 ”颜色 控件 ， 设 置 画布 中 的 黄色 拢 形 颜色 为 红色 ， 然 后 点 击 “ 圆 形 ”颜色 控件 ， 
设置 画布 中 的 蓝 色 圆 形 颜色 为 绿色 ， 效 果 如 图 6.7 所 示 。 


矩形 圆 形 

声色 ， 国 到 po 
一 一 一 一 
吊 : 一 一 人 一 一 动 , 一 一 一 一 
宾 度 ;一半 一 一 一 半 色 , 一 和 一 一 一 
高 度 : 一 站 一 一 一 


图 6.7 调整 “矩形 ”和 “ 圆 形 ”颜色 控件 
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利用 编辑 器 打开 “6-4 .绘制 图 形 : 矩形 和 圆 形 .html” 文 件 ， 代 码 如 下 : 
【代码 64】 
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代码 第 12~20 行 是 矩形 调节 区 的 HTML 结构 ， 第 21~28 行 是 圆 形 调整 区 的 HTML 结构 。 

代码 第 31 和 33 行 分 别 是 和 矩形 和 圆 形 的 画布 。 

代码 第 38 和 40 行 分 别 从 文档 中 获取 对 应 画布 的 上 下 文 。 

代码 第 41~50 行为 函数 draw_rect， 用 于 在 画布 上 绘制 矩形 。 该 函数 第 42 行 代码 清空 画布 上 
固定 矩形 区 域 的 内 容 ， 就 像 平时 所 用 的 橡皮 擦 。clearRect 方 法 拥有 4 个 参数 ， 语 法 如 下 : 


x: 要 清除 的 短 形 左上 角 的 x 轴 坐 标 。 
y: 要 清除 的 天 形 左上 角 的 y 轴 坐 标 。 
width: 要 清除 的 和 矩 形 的 宽度 ， 以 像素 计 。 
height: 要 清除 的 矩形 的 高 度 ， 以 像素 计 。 


代码 第 43 行 获取 矩形 调节 区 颜色 控制 的 值 ， 设 置 矩 形 画布 的 颜色 。 
代码 第 44~49 行 填充 1 个 矩形 ，flRect 方法 拥有 4 个 参数 ， 参 数 用 法 与 clearRect 方法 相 
同 ， 语 法 如 下 : 
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代码 第 51~55 行 获取 矩形 调节 区 颜色 控件 和 各 滑 块 元 素 。 

代码 第 57~59 行 监听 矩形 调节 区 各 控件 的 change 事件 。 当 各 控件 的 值 发 生变 化 时 ， 调 用 函 
数 draw_rect 重新 绘制 矩形 。 

代码 第 60 行 调用 函数 draw_rect， 使 用 矩形 调节 区 各 控件 的 默认 值 绘制 默认 珑 形 。 

圆 形 区 的 代码 基本 与 矩形 区 的 相似 ， 只 是 在 调用 画布 上 下 文 的 方法 上 略 有 不 同 ， 绘 制 圆 形 通 
过 draw_circle 函数 实现 。 

代码 第 64 行 调用 方法 beginPath， 告 诉 画布 开始 一 条 新 的 路 径 。 假 使 不 调用 该 方法 ， 每 次 绘 
制 的 图 形 会 被 重 车 。 

代码 第 65~73 行 调用 方法 are 以 给 定 的 坐标 点 为 中 心 点 以 指定 半径 画 1 条 统 ， 语 法 如 下 : 


x，y: 弧 圆 心 坐标 。 

radius: 弧 圆 心 半径 。 

startAngle，endAngle: 弧 的 开始 点 和 结束 点 弧度 。 
counterclockwise: 弧 沿 逆 时 针 true 或 顺 时 针 false 绘制 。 


代码 第 74 行 调用 closePath 方法 关闭 之 前 打开 的 路 径 。 第 75 行 调用 fill 方法 ， 使 用 设置 的 
filStyle 属性 颜色 填充 绘制 的 路 径 。 


6.2.2 ”绘制 文字 


随 着 互联 网 的 发 展 ， 图 片 成 为 人 们 分 享 信息 的 一 种 重要 手段 ， 但 随 之 而 来 的 图 片 盗用 问题 成 
为 阻碍 用 户 分 享 的 一 大 障碍 。 目 前 ， 被 认为 行 之 有 效 的 方法 是 给 用 户 上 传 的 图 片 加 上 水 印 ， 防 止 
图 片 被 次 用。 本 例 提供 了 HTML5 加 水 印 的 解决 方案 。 

使 用 Chrome 浏览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.8 所 示 。 


在 图 形 中 写字 





6.8 使 用 Chrome 打开 网 页 文件 
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点 击 “ 选 择 文件 ”按钮 ， 选 择 任意 图 片 并 打开 〈 示 例 中 选择 了 “ 考 拉 ” 图 )， 效 果 如 图 6.9 
所 示 。 





文字 





图 69 点 击 “ 选 择 文件 ”按钮 选择 一 张 图 片 并 打开 


在 画布 设置 区 调节 “ 宽 ”“ 高 ” 滑 块 为 最 大 值 ， 然 后 将 光标 移入 画布 框 ， 此 时 光标 样式 变 为 
拖 动 状态 。 拖 动画 布 框 中 的 图 片 ， 直 到 合适 位 置 后 松 开 ， 效 果 如 图 6.10 所 示 。 












图 6.10 调整 画布 大 小 并 拖 动 图 片 到 合适 位 置 


此 时 画布 内 出 现 一 个 完整 的 考 拉 头像 。 接 下 来 给 图 片 打上 水 印 “ 我 是 考 拉 ”， 并 将 水 印 移动 
到 图 片 的 右 下 角 。 调 整 文字 的 字体 、 颜 色 和 大 小 ， 效 果 如 图 6.11 所 示 。 











ER | aaaupg 
文字 


| 
A 
| 





图 6.11 调整 文字 内 容 和 样式 
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利用 编辑 器 打开 “6-5. 在 图 形 中 写字 .html” 文 件 ， 代 码 如 下 : 
【代码 6-5】 
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本 例 涉及 多 个 逻辑 功能 点 ， 将 代码 功能 分 成 3 大 块 进行 分 析 。 


1. 在 画布 中 显示 本 地 图 片 


代码 第 88 行 创建 一 个 图 片 实例 赋予 变量 img。 

代码 第 109 行 监听 变量 img 的 load 事件 ， 当 图 片 的 src 属性 发 生 改 变 时 触发 函数 draw。 

代码 第 111~125 行 添加 对 上 传 控件 change 事件 的 监听 ， 当 上 传 的 控件 值 改 变 时 触发 事件 。 

代码 第 112 行 定义 变量 files 存储 上 传 文件 列表 。 

代码 第 114~124 行 循环 文件 列表 ， 判 断 文件 类 型 是 否 为 图 片 类 型 。 遇 到 图 片 文件 ， 通 过 
FileReader 读 取 文 件 内 容 。 当 文件 读 取 完 毕 ， 重 新 设置 变量 img 的 src 属性 ， 待 图 片 加 载 完毕 以 
后 触发 函数 draw。 在 函数 draw 中 绘制 图 片 的 代码 如 下 : 


drawImage 语法 如 下 : 


image: 所 要 绘制 的 Image 元 素 。 

sourceX，sourceY: 图 像 在 画布 左上 角 坐 标 位 置 。 
sourceWidth，sourceHeight: 图 像 的 宽 和 高 。 
destX，destY: 绘制 图 像 区 域 左上 角 的 画布 坐标 。 
destWidth，destHeight: 图 像 区 域 所 要 绘制 的 画布 大 小 。 


在 画布 中 绘制 图 像 必 须 在 图 像 加 载 完毕 以 后 执行 ， 即 在 图 像 的 load 事件 回调 中 进行 ， 和 否则 





绘制 为 空 图 。 


2. 在 画布 中 写 入 文字 

函数 draw 有 两 个 功能 ， 一 个 是 绘制 图 片 ， 另 外 一 个 是 在 画布 上 写 入 文字 。 
代码 第 91 行 清空 对 应 画布 大 小 区 域 的 内 容 。 

代码 第 92、93 行 读 取 画布 调节 区 宽 高 滑 块 的 值 ， 重 新 设置 画布 宽 高 。 
代码 95~97 行 分 别 设置 画布 文字 的 颜色 、 水 平 位 置 、 大 小 和 字体 。 
代码 第 99 行 调用 画布 的 fllText 方法 写 入 文字 ，fillText 语法 如 下 : 


102 


第 6 章 移动 特性 5 一 一 Canvas 绘图 


text: 文本 内 容 。 

x: 相对 于 画布 的 x 轴 坐 标 。 

y: 相对 于 画布 的 y 轴 坐 标 。 

maxWidth: 可 选 ， 允 许 的 最 大 文本 宽度 ， 以 像素 计 。 


3. 拖 动画 布 中 的 图 片 
使 用 脚本 完成 拖 动 元 素 效果 ， 首 先 要 明白 元 素 的 3 种 事件 : 


@ 。 mousedown: 事件 会 在 鼠标 按键 被 按 下 时 发 生 。 
@ mouseup: 事件 会 在 鼠标 按键 被 松 开 时 发 生 。 
@ mousemove: 事件 会 在 鼠标 指针 移动 时 发 生 。 


本 例 实现 画布 中 图 片 拖 动 的 效果 见 代码 第 126~148 行 ， 下 面 分 析 相 关 的 代码 逻辑 。 

代码 第 126 行 定义 了 2 个 初始 化 为 0 的 变量 ， 用 于 记录 图 片 拖 动 后 的 坐标 偏 移 量 。 

代码 第 136~141 行 在 用 鼠标 点 击 画 布 时 被 触发 。mousedown 触发 后 ， 先 判断 画布 中 是 否 已 
经 存在 图 片 。 如 果 已 经 上 传 图 片 (img 变量 的 src 属性 不 为 空 )， 就 获取 鼠标 指针 位 置 相对 于 当前 
窗口 的 x 轴 坐 标 和 y 轴 坐 标 ， 并 将 两 个 坐标 值 缓存 在 canvas 元 素 变量 上 。 最 后 监听 canvas 元 素 
的 mousemove 事件 ， 绑 定 canvas_mousemove 函数 。 

代码 第 144~147 行 在 鼠标 在 文档 内 松 开 时 被 触发 。mouseup 触发 后 ， 将 move_x、move_y 两 
个 图 片 坐标 偏 移 量 缓存 在 canvas 元 素 变量 上 ， 并 在 移 除 mousedown 时 绑 定 在 canvas 元 素 上 的 
mousemove 事件 监听 。 

代码 第 127~134 行 是 完成 拖 动 效 果 的 关键 。 拖 动 时 计算 图 画 和 画布 的 相对 位 置 ， 代 码 如 





下 : 
move x = e.clientX - canvas.$mousedown x + canvas.$mouseup move x; 
move y = e.clientY - canvas.$mousedown y + canvas.$mouseup move _y; 
首先 分 析 如 何 得 到 move_x， 即 当前 图 片 拖 动 后 相对 于 画布 的 x 轴 坐 标 (move_y 的 计算 方 
法 与 move_x 类 似 )。 
@ eclientX: 拖 动 时 鼠标 指针 位 置 相对 于 当前 窗口 的 x 轴 坐 标 。 
@ canvas.$mousedown_x: 拖 动 开始 时 鼠标 指针 位 置 相对 于 当前 窗口 的 x 轴 坐 标 。 
@ canvas.$mouseup_move_ x: 上 次 拖 动 结束 后 图 片 相 对 于 画布 的 偏 移 量 ， 默 认 未 拖 动 为 0。 








圭 代码 分 析 并 未 包括 所 有 源码 ， 未 提 及 的 可 以 参考 代码 的 注释 。 | 











6.2.3 颜色 渐变 


是 否 觉得 前 面 例子 的 水 印 文字 变化 过 于 单调 ? 本 例 将 在 此 基础 上 运用 Canvas 增加 文字 渐变 
处 理 。 示 例 中 将 原来 的 “颜色 ”一 栏 变化 为 “起 始 色 ”“ 过 渡 色 ”和 “终止 色 ”， 并 采用 线性 渐变 
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以 直线 为 渐变 轴 处 理 文字 。 
使 用 Chrome 浏览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.12 所 示 。 


在 图 形 中 写字 








图 6.12 使 用 Chrome 打开 网 页 文件 


选择 “图 片 库 ” 中 的 “郁金香 jpg” 并 打开 。 调 整 画布 宽度 、 文 字 内 容 、 文 字 XY 轴 和 文字 
大 小 ， 效 果 如 图 6.13 所 示 。 





图 6.13 选择 图 片 并 调整 相关 设置 


本 例 代 码 基本 与 前 面 的 例子 相同 ， 下 面 就 不 同 部 分 做 一 个 分 析 。 
去 掉 了 原 有 的 文字 “颜色 ”控件 后 ， 新 增 3 个 颜色 选择 控件 ， 代 码 如 下 : 


draw 函数 增加 了 文字 渐变 色 处 理 。 
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利用 编辑 器 打开 “6-6. 画 布 中 使 用 渐变 色 .html” 文 件 ， 代 码 如 下 : 
【代码 6-6】 





draw 函数 第 8 行 代码 调用 context 的 createLinearGradient 方法 ， 该 方法 创建 一 个 线性 颜色 渐 
变 对 象 ， 渐 变 由 左上 和 角 到 右 下 角 线 性 进行 ， 语 法 如 下 : 


@ xStart，yStart: 渐变 起 始点 的 坐标 。 
@ xEnd，yEnd: 渐变 结束 点 的 坐标 。 


代码 第 9~11 行 调用 线性 渐变 对 象 gradient 的 addColorStop 方法 ， 分 别 在 开始 点 、 中 间 点 、 
结束 点 添加 对 应 颜色 ， 说 明 如 下 : 


@ offset: 表示 渐变 的 开始 点 和 结束 点 之 间 的 一 部 分 ， 是 在 0.0~1.0 之 间 的 浮 点 值 。 
@ color: 表示 指定 offset 显示 的 颜色 ， 本 例 中 通过 3 个 颜色 控件 来 定义 。 
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| Canvas 渐变 除了 线性 渐变 外 还 有 径 向 渐变 (关键 API 为 createRadialGradient) 。 有 兴趣 的 读 
| 者 可 以 尝试 修改 本 示例 ， 熟 悉 两 种 渐变 方法 的 使 用 。 








名. ”范例 一 带 特 效 的 相册 APP 


在 很 多 社交 网 站 上 能 看 到 这 样 的 场景 ， 用 户 上 传 自 定义 头像 ， 并 对 其 进行 编辑 保存 。 多 数 网 
站 实现 图 像 编辑 功能 采用 的 是 Flash 技术 。 本 例 将 采用 HTML 5 技术 实现 此 场景 ， 具 备 上 传 图 片 
和 简单 的 剪贴 功能 。 

使 用 Chrome 浏览 器 打开 网 页 文件 ， 运 行 效果 如 图 6.14 所 示 。 

点 击 “ 选 择 文件 ”按钮 ， 在 图 库 中 选择 “Einstein.png” 图 片 并 打开 ， 效 果 如 图 6.15 所 示 。 
































原画 布 目标 画布 
图 6.14 使 用 Chrome 打开 网 页 文件 图 6.15 点击 “选择 文件 ”按钮 并 打开 图 片 


在 人 物 的 头 部 左上 方 按 住 鼠标 左 键 ， 并 沿 着 右 下 方 拖 动 ， 出 现 一 个 蓝 色 虚线 框 。 虚 线 区 域 将 
被 剪贴 到 右 侧目 标 画 布 ， 效 果 如 图 6.16 所 示 。 松 开 鼠 标 左 键 ， 原 画布 虚线 框 内 的 爱 因 斯 坦 头像 
被 复制 到 右 侧目 标 画 布 ， 效 果 如 图 6.17 所 示 。 




















图 6.16 点 击 鼠 标 左 键 并 拖 动 图 6.17 松 开 鼠 标 左 键 截 取 头 像 
利用 编辑 器 打开 “6-7. 在 画布 中 剪贴 图 像 .html” 文 件 ， 代 码 如 下 : 
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代码 第 05~09 行使 用 CSS 3 的 @keyframes 创建 了 一 个 动画 。 示 例 中 的 @-webkit-keyframes 
表示 只 适用 于 WebKit 内 核 浏览 器 。@-webkit-keyframes 后 方 紧 跟 的 标识 符 表示 动画 的 名 称 ， 大 
括号 内 为 动画 的 过 程 。 关 键 词 “from” 和 “to” 等 同 于 0% 和 100%， 以 上 的 代码 等 同 于 如 下 
代码 : 





样式 类 button 中 使 用 了 定义 的 bluePulse 动画 ， 代 码 如 下 : 





@@ -webkitranimation-name: 动画 名 。 
@ -webkitanimation-duration: 完成 一 个 周期 所 花费 的 时 间 ， 秒 .默认 是 0。 
®@ -webkit-animation-iteration-count: 动画 被 播放 的 次 数 。 默 认 是 1， 示 例 中 infinite 表示 无 限 。 


CSS 3 动画 还 提供 其 他 丰富 的 属性 ， 想 了 解 更 多 内 容 可 以 浏览 网 址 http/www.w3school, 


com.cn/css3/css3_animations.asp。 





接着 分 析 脚 本 逻辑 的 关键 部 分 ， 其 余部 分 读者 可 以 参考 代码 后 方 注释 。 

代码 第 39~45 行 定义 函 数 draw， 用 于 在 原画 布 绘制 上 传 图 片 ， 并 清空 目标 画布 内 容 。 

代码 第 47~52 行 定义 函数 css， 封 装 了 一 个 简单 设置 和 获取 元 素 样式 的 方法 ， 没 有 过 多 对 浏 
览 器 兼容 性 做 处 理 ， 读 者 可 以 使 用 第 三 方 类 库 〈( 如 jQuery) 替代 这 个 临时 方法 。 

代码 第 57~59 行 定义 了 5 个 变量 : 

@ start x，start y: 记录 点 击 筷 标 时 在 浏览 器 上 的 坐标 。 

@ ”move x，move y: 记录 点 击 筷 标 后 在 原画 布 移动 的 相对 距离 。 

@ offset xy: 预 设 筷 标 离 虚线 剪贴 框 的 距离 。 


代码 第 60~69 行 定义 函数 canvas_mousemove， 为 虚线 剪贴 框 运 行 拖 动 的 核心 函数 。 首 先 ， 
计算 获得 鼠标 点 击 后 移动 的 相对 距离 ， 然 后 根据 坐标 轴 的 4 个 区 间 分 成 左上 、 左 下 、 右 上 、 右 下 
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4 个 方向 。 通 过 判断 移动 距离 的 正 负 关系 ， 得 到 鼠标 的 移动 方向 ， 最 后 设置 虚线 剪贴 框 的 样式 。 

代码 第 72~81 行 监听 原画 布 的 mousedown 事件 。 用 户 在 原画 布 上 点 击 鼠 标 后 ， 在 DOM 文 
档 内 插入 一 个 宽 、 高 为 1 像素 的 DIV 元 素 表示 剪贴 框 ， 并 添加 对 原画 布 mousemove 事件 的 监 
昕 ， 监 听 函 数 为 canvas_mousemove。 

代码 第 82~98 行 监听 DOM 文档 的 mouseup 事件 。 松 开 鼠 标 后 ， 移 除 绑 定 在 目标 画布 
mousemove 事件 上 的 canvas_mousemove 函数 ， 防 止 多 次 绑 定 。 通 过 if 条 件 过 滤 后 ， 计 算 矩 形 虚 
线 剪贴 框 左上 角 相对 于 原画 布 的 距离 (单位 为 像素 )， 然 后 调用 目标 画布 drawImage 方法 ， 在 目 
标 画 布 上 绘制 剪贴 图 片 。 

在 上 面 的 示例 中 已 经 实现 了 截取 上 传 图 像 指 定 区 域 的 功能 。 本 例 将 加 入 对 截取 后 图 像 的 360 
度 旋转 功能 ， 用 户 可 以 轻松 对 图 像 进行 4 个 方向 的 旋转 。 

使 用 Chrome 浏览 器 打开 网 页 文件 ， 目 标 画 布下 方 多 出 1 个 旋转 按钮 ， 运 行 效果 如 图 6.18 所 示 。 
































6.18 ”使 用 Chrome 打开 网 页 文件 


点 击 “ 选 择 文件 ”按钮 ， 在 图 库 中 选择 “Einstein-180.png ”图 片 并 打开 。 该 图 片 是 
“Einstein.png” 的 180 度 旋转 图 ， 效 果 如 图 6.19 所 示 。 使 用 鼠标 截取 原画 布 “ 爱 因 斯 坦 ” 的 头 
部 ， 此 时 原画 布 与 目标 画布 图 像 均 是 倒立 的 ， 效 果 如 图 6.20 所 示 。 单 击 两 次 “旋转 ”按钮 ， 进 
行 两 次 90 度 目标 图 片 旋转 ， 效 果 如 图 6.21 所 示 。 


EY snsten-lso.png 








6.19 点击“ 选择 文件 ”按钮 并 打开 图 片 图 6.20 截取 图 像 
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本 可 Einstein-180.png 





图 621 旋转 图 像 


利用 编辑 器 打开 “6-8. 实 现 相片 的 360 度 旋转 特效 .html” 文 件 。 本 例 代码 多 数 与 “6-7. 在 画 
布 中 剪贴 图 像 .html” 类 似 ， 不 同 部 分 主要 集中 在 处 理 图 片 旋转 的 脚本 逻辑 。 下 面 就 这 部 分 做 一 
个 分 析 ， 代 码 如 下 : 


【代码 6-8】 
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代码 第 02 行 定 义 变量 rotation_angle， 用 于 存储 图 片 旋转 的 4 个 角度 值 。 
代码 第 03 行 定义 变量 temp_image， 存 放 1 个 Image 的 实例 。 该 图 片 实例 的 src 属性 会 在 每 
次 截取 图 片 完毕 后 被 赋值 ， 代 码 如 下 : : 


代码 第 05~07 行 判断 目标 temp_image 的 src 属性 是 否 为 空 ， 即 判断 目标 画布 是 否 被 绘制 内 
容 。 若 没有 被 绘制 ， 则 不 继续 往 下 走 。 
在 计算 图 片 左上 角 位 置 之 前 ， 先 了 解 Canvas 的 rotate 方法 ， 方 法 语法 如 下 : 


rotate 方法 的 旋转 效果 如 图 6.22 所 示 。 


0,0 200 





代码 第 19~24 行 给 出 了 计算 4 种 变化 对 应 的 图 片 左上 角 位 置 值 。 
在 旋转 图 片 的 逻辑 中 ， 还 需要 特别 注意 以 下 两 个 关键 方法 : 


@ save: 把 当前 状态 的 一 份 副本 压 入 一 个 保存 图 像 状态 的 栈 中 。 
@ restore: 从 栈 中 弹出 存储 的 图 形状 态 并 恢复 画布 对 和 象 的 属性 、 剪 切 路 径 和 变换 矩阵 的 值 。 
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各.4， 本 章 小 结 


本 章 主要 介绍 了 HTML 5 多 媒体 绘图 的 特性 ， 包 括 Canvas 控件 等 方面 的 内 容 ， 并 通过 多 个 
实际 范例 介绍 了 如 何 使 用 HTML 5 多 媒体 绘图 的 方法 ， 希 望 对 读者 有 一 定 的 帮助 。 
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CSS 随 着 Web 2.0 的 出 现 和 发 展 ， 以 往 的 特性 和 标准 已 经 无 法 完全 满足 现今 的 交互 和 需求 ， 
开发 者 需要 更 强 的 字体 选择 、 更 方便 的 阴影 渐变 、 更 简单 的 图 形 动画 。 随 之 而 来 的 就 是 CSS 3 
的 到 来 ， 在 不 需要 改变 原 有 设计 结构 的 情况 下 ， 就 可 以 使 用 最 新 的 特性 ， 做 到 良好 的 向 后 兼容 。 
不 过 目前 支持 的 浏览 器 有 限 ， 很 大 一 部 分 新 功能 在 使 用 时 都 需要 添加 浏览 器 前 级 ， 给 开发 使 用 带 
来 了 一 定 的 困难 。 本 章 将 从 背景 、 文 字 效 果 、 边 框 、 用 户 界面 、 转 换 和 过 渡 6 个 性 能 点 来 介绍 
CSS 3。 


了 .1 css 3 的 变化 


CSS 3 让 原 有 的 网 站 更 加 趣味 嚼 然 ， 很 多 站 点 都 给 自己 的 网 站 页 面 添加 了 各 种 酷 炫 的 CSS 3 
效果 ， 让 网 站 变 得 更 加 吸引 人 ， 如 大 众 点 评 网 的 十 周年 活动 页 面 (网 址 为 
http://www.dianping.com/userevent/ten/tm/1)， 效 果 如 图 7.1 所 示 。 

图 7.1 中 箭头 所 指 区 域 均 使 用 了 CSS 3 动画 效果 ， 用 到 了 @keyframes 和 animation 样式 功 
能 。 读 者 可 以 继续 向 下 滚动 页 面 查看 更 多 的 CSS 3 动画 效果 。 这 里 推荐 一 个 CSS 3 的 体验 网 站 

(网 址 为 http://beta.theexpressiveweb.com/)， 上 面 通过 CSS 3 制作 的 动画 生动 地 介绍 了 HTML 5 
和 CSS 3 的 新 特性 。 


/© a | 我 的 时 关机 





加 点 点 评 胃 光 加 a 


7.1 动画 效果 页 面 
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7.2 背景 ( Backgrounds ) 


在 CSS 2.1 中 background 属性 已 经 出 现 ， 并 且 拥有 以 下 5 个 属性 : 


@ background-color: 背景 色 。 

@ background-image: 背景 图 片 地 址 ， 相 对 或 者 绝对 位 置 。 

@ background-repeat: 是 否 及 如 何 重 复 背 景 图 像 ， 默 认为 repeat 表示 图 像 将 在 垂直 方向 和 
水 平方 向 重复 。 

@ background-attachment: 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 ， 默 认为 
scroll 表示 随 着 页 面 的 其 余部 分 滚动 。 

@ background-position: 背景 图 像 的 起 始 位 置 。 


在 CSS 3 中 又 给 background 添加 了 3 种 属性 ， 下 面 分 别 进行 介绍 。 

1. background-origin 

background-origin 用 于 设置 或 检索 对 象 的 背景 图 像 计算 background-position 时 的 参考 原点 

(位 置 )， 共 有 3 种 可 选 值 : padding-box 表示 从 padding 区 域 〈 含 padding) 开始 显示 背景 图 像 ， 

border-box 表示 从 border 区 域 〈 含 border) 开始 显示 背景 图 像 ，content-box 表示 从 content 区 域 
开始 显示 背景 图 像 。 

通过 background-origin 示例 比较 3 种 属性 ， 使 用 Chrome 浏览 器 打开 backgound-origin.htm 
文件 ， 效 果 如 图 7.2 所 示 。 


content-box padding-box border-box 





图 72 ”background-origin 示例 效果 图 
2. background-clip 
background-clip 用 于 指定 对 象 的 背景 图 像 向 外 裁剪 的 区 域 ， 同 样 具 有 3 种 可 选 值 : padding- 
box 表示 从 padding 区 域 〈 不 含 padding) 开始 向 外 裁剪 背景 ，borderbox 表示 从 border 区 域 (不 
含 border) 开始 向 外 裁剪 背景 ，content-box 表示 从 content 区 域 开始 向 外 裁剪 背景 。 
通过 background-clip 示例 比较 3 种 属性 ， 使 用 Chrome 浏览 器 打开 backgound-clip.htm 文 
件 ， 效 果 如 图 7.3 所 示 。 





content-box padding-box border-box 

[| 
国 HINL 5;HTNL 5;HTIL @ @ HIIL 5;HTNL 5;HIIL @ @ HINL 5;HTNL 5;HTIL @ 
国 5;HIIL 5;HTNL 5; 5;HINL 5;HIIL 5; 5;HINL 5;HIIL 5; 9 
man 


图 73 ”background-clip 示例 效果 图 


116 


第 7 章 移动 特性 6 一 一 CSS 3 视觉 辅助 


3. background-size 

background-size 用 于 检索 或 设置 对 象 的 背景 图 像 尺 寸 大 小 ， 人 允许 用 长 度 或 者 百分比 指定 背景 
图 片 大 小 ， 不 允许 使 用 负 值 。 通 过 background-size 示例 可 以 比较 各 种 写法 。 使 用 Chrome 浏览 器 
打开 backgound-size.htm 文件 ， 效 果 如 图 7.4 所 示 。 


宽度 百分比 cover contain 





7.4 ”background-size 示例 效果 图 


另外 ，CSS 3 还 支持 Multiple backgrounds， 即 多 重 背 景 图 像 ， 可 以 把 不 同 背 景 图 像 只 放 到 1 
个 块 元 素 里 。 多 个 图 片 URL 之 间 使 用 去 号 隔 开 ， 如 果 有 多 个 背景 图 片 ， 而 其 他 属性 只 有 1 个 
(例如 background-repeat 只 有 1 个 )， 就 表明 所 有 背景 图 片 都 应 用 该 属性 值 。 通 过 Multiple 
backgrounds.htm 示例 学 习 如 何 使 用 Multiple backgrounds， 效 果 如 图 7.5 所 示 。 


7.5 Multiple backgrounds 使 用 效果 图 





文字 效果 ( Text Effects ) 


CSS 3 对 文字 也 增加 了 多 种 效果 ， 下 面 将 介绍 其 中 的 两 种 效果 。 
1. text-shadow 
text-shadow 用 于 设置 或 检索 对 象 中 文本 的 文字 是 否 有 阴影 及 模糊 效果 ， 语 法 如 下 : 


text-shadow : none | <length> none | [<shadow>，] * <shadow> 或 none | <color> 
[，<color> ]* 


通过 text-shadow 示例 查看 使 用 效果 。 使 用 Chrome 浏览 器 打开 textshadowhtm 文件 ， 效 果 


HIML9 


图 7.6 text-shadow 示例 效果 图 


I 
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2. text-overflow 
text-overflow 用 于 设置 或 检索 是 否 使 用 一 个 省 略 标记 “.…” 表 示 对 象 内 文本 的 溢出 ， 语 法 如 
下 : 





@ clip: 不 显示 省 略 标记 “.…”， 而 是 简单 地 裁 切 。 

@ ellipsis: 当 对 象 内 文本 溢出 时 显示 省 略 标记 “...”。 

通过 text-overflow 示例 查看 使 用 效果 。 使 用 Chrome 浏览 器 打开 text-overflow.htm 文件 ， 效 
果 如 图 7.7 所 示 。 


text-overflow : clip 
不 显示 省 略 标记 ， 而 是 侧 单 6 
text-overflow : ellipsis 


当 对 象 内 文本 溢出 时 显示 … 


图 7.7 ”text-overflow 示例 效果 图 


7.4 边框 (Border ) 


CSS 中 的 Border 主要 用 于 处 理 边框 效果 ， 经 常 被 使 用 在 网 页 中 。 新 版 的 CSS 3 对 Border 属 
性 添加 了 更 多 丰富 的 功能 ， 本 节 将 介绍 几 种 功能 属性 : border-colors、border-radius、border-image 
和 box-shadow。 

1. border-colors 

bordercolors 用 于 设置 或 检索 对 象 边框 的 多 重 颜 色 ，CSS 2 中 border-colors 已 经 出 现 ， 但 
CSS 3 中 的 可 以 制作 渐变 边框 ， 不 过 目前 只 有 Firefox 对 border-colors 支持 比较 完整 。 查 看 
border-colors 示例 ， 使 用 Firefox 浏览 器 打开 border-colors.htm 文件 ， 效 果 如 图 7.8 所 示 。 


HTNRLS 


图 7.8 ”border-colors 示例 效果 


2. border-radius 
border-radius 用 于 设置 或 检索 对 象 使 用 圆 角 边框 ， 这 个 属性 应 该 是 目前 出 镜 率 最 多 的 CSS 3 
属性 ， 也 是 目前 各 大 网 站 最 常用 的 CSS 3 属性 ， 语 法 如 下 : 
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查看 border-radius 示例 ， 使 用 Chrome 浏览 器 打开 borderradius htm 文件 ， 效 果 如 图 7.9 所 示 。 


TL 


图 7.9 borderradius 示例 效果 
3. border-image 
border-image 用 于 设置 或 检索 对 象 的 边框 样式 并 使 用 图 像 来 填充 ， 一 直 以 来 边框 的 填充 只 能 
使 用 颜色 来 进行 ，CSS 3 在 这 点 上 做 了 较 大 的 突破 。border-image 可 以 被 拆 解 为 以 下 5 种 属性 : 


@ border-image-source: 用 于 设置 引入 图 片 的 地 址 。 

border-image-slice: 用 于 切割 引入 的 图 片 。 

border-image-width: 设置 边框 的 宽度 。 

border-image-repeat: 设置 图 片 的 排列 方式 ， 如 stretch、repeat、round。 
border-image-outset: 设置 边框 图 像 超过 边框 念 的 偏 移 量 。 


border-image 属性 语法 如 下 : 


查看 border-image 示例 ， 使 用 Chrome 浏览 器 打开 border-image.htm 文件 ， 效 果 如 图 7.10 所 示 。 


Wa vw 


Cg 


b 
Lm nn nn nm 


: 
t 
; 


图 7.10 ”border-image 示例 效果 
4. box-shadow 
box-shadow 用 于 向 边框 添加 1 个 或 多 个 阴影 ， 通 过 逗号 分 隔 阴影 列表 ， 语 法 如 下 : 
boxrshadow: hrshadow v-shadow blur spread color inset; 
各 属性 值 说 明 如 下 : 


@@ 。 h-shadow: 水 平 阴影 的 位 置 ， 允 许 负 值 。 
V-shadow: 垂直 阴影 的 位 置 ， 允 许 负 值 。 
blur: 模糊 距离 ， 可 选 。 

Spread: 阴影 的 尺寸 ， 可 选 。 

color: 阴影 的 颜色 ， 可 选 。 
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@ inset: 将 外 部 阴影 (outset ) 改 为 内 部 阴影 ， 可 选 。 
查看 box-shadow 示例 ， 使 用 Chrome 浏览 器 打开 box-shadow .htm 文件， 效果 如 图 7.11 所 示 。 


加 
一 


7.11 ”box-shadow 示例 效果 





7。 5 用 户 界面 ( User interface ) 


1. outline 
outline 用 于 设置 或 检索 对 象 外 的 线条 轮廓 ， 语 法 如 下 : 


各 属性 值 说 明 如 下 : 


@ outline-style: 指定 轮廓 边框 轮廓 。 
@ outline-width: 指定 轮廓 边框 宽度 。 
@ outline-offset: 指定 轮 廊 边框 偏 移 位 置 的 数值 。 
@ outline-color: 指定 轮廓 边框 颜色 。 


查看 outline 示例 ， 使 用 Chrome 浏览 器 打开 outline.htm 文件 ， 效 果 如 图 7.12 所 示 。 


图 7.12 ”outline 示例 效果 





2. box-sizing 
box-sizing 用 于 改变 容器 的 盒 模型 组 成 方式 ， 语 法 如 下 : 





各 属性 值 说 明 如 下 : 
@@ content-box: padding 和 border 不 被 包含 在 定义 的 width 和 height 之 内 ， 与 标准 模式 下 
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的 盒 模型 相同 。 
@ border-box: padding 和 border 被 包含 在 定义 的 width 和 height 之 内 ， 表 现 为 怪异 模式 下 
的 盒 模型 。 


content-box 属性 与 border-box 属性 均 用 于 设置 或 检索 对 象 的 盒 模型 组 成 模式 ， 但 二 者 又 有 
所 区 别 。 下 面 分 别 通过 两 段 样式 代码 来 比较 这 两 个 属性 使 用 效果 的 区 别 ， 具 体 如 下 : 





content-box 使 用 效果 说 明 如 图 7.13 所 示 。 





图 7.13 ”content-box 图 示 





border-box 使 用 效果 说 明 如 图 7.14 所 示 。 





图 7.14 borderbox 图 示 
3. resize 
resize 用 于 设置 或 检索 对 象 的 区 域 是 否 人 允许 用 户 缩放 ， 调 节 元 素 尺 寸 大 小 ， 语 法 如 下 : 





各 属性 值 说 明 如 下 : 

@ ”none: 不 允许 用 户 调整 元 素 大 小 。 

@ ”both: 用 户 可 以 调节 元 素 的 宽度 和 高 度 。 
@ horizontal: 用 户 可 以 调节 元 素 的 宽度 。 
@ vertical: 用 户 可 以 调节 元 素 的 高 度 。 
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使 用 效果 如 图 7.15 所 示 。 
e。 HINL5 
。 HTIL5 
3 \N 
图 7.15 resize 使 用 效果 
4. nav 系列 


nav 系列 用 于 设置 对 象 的 导航 顺序 和 方向 ， 分 为 nav-up、nav-right、nav-down、nav-up。 作 
为 旧版 本 HTML 属性 tabindex 的 蔡 代 品 ， 人 允许 在 CSS 中 设置 页 面 元 素 通过 键盘 操作 获取 焦点 的 
顺序 ， 通 常 使 用 “Tab” 按 键 进行 顺序 切换 。 


5.ime-mode 


用 于 设置 或 检索 是 否 允 许 用 户 激活 输入 中 文 、 韩 文 、 日 文 等 的 输入 法 (IME) 状态 ， 语 法 如 
下 : 





各 属性 说 明 如 下 : 


@ ”auto: 默认 值 ， 不 影响 当前 输入 法 编辑 器 的 状态 。 

@ ”normal: 输入 法 编辑 器 的 状态 应 该 是 normal， 这 个 值 可 以 用 于 用 户 样 式 表 来 覆盖 页 面 
的 设置 。 

@ active: 输入 法 编辑 器 的 状态 初始 时 是 激活 的 ， 输 入 将 一 直 使 用 该 输入 法 直到 用 户 切换 
输入 法 。 

@ inactive: 输入 法 编辑 器 的 状态 初始 时 是 非 激活 状态 ， 除 非 用 户 激活 输入 法 。 

@ disabled: 禁用 输入 法 编辑 器 ， 该 输入 法 编辑 器 也 许 不 会 被 用 户 激活 。 








本 局 目前 新 版 的 Chrome、Opera、Safari 均 不 支持 该 属性 。 | 





7.6 转换 ( Transform ) 


CSS 3 Transform 包含 旋转 (rotate)、 扭 曲 (skew)、 缩 放 (scale)、 移 动 translate) 和 和 矩阵 
变形 (matrix)， 语 法 如 下 : 





当 使 用 多 个 transform 属性 时 ， 需 要 使 用 空格 符号 隔 开 ， 各 属性 说 明 如 下 : 
@ rotate: 通过 设置 角度 参数 给 元 素 指定 1 个 2D 旋转 ， 正 值 为 顺 时 针 ， 负 值 为 逆 时 针 。 
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@ skew: 通过 传 入 的 矢量 进行 水 平方 向 和 垂直 方 扭曲 变形 ， 即 X 轴 和 Y 轴 同 时 按 一 定 的 
角度 值 进行 捏 曲 变形 ， 同 时 还 支持 使 用 skewX 和 skewY 进行 单个 方向 的 扭曲 变形 。 

@ scale: 通过 传 入 的 矢量 进行 水 平方 向 和 垂直 方向 缩放 ， 同 时 还 支持 使 用 scaleX 和 
scaleY 进行 单个 方向 的 缩放 。 

@ translate: 通过 传 入 的 矢量 进行 水 平方 向 和 垂直 方向 移动 ， 同 时 还 支持 使 用 translateX 
和 translateY 进行 单个 方向 的 移动 。 

@ matrix: 以 1 个 含 6 位 值 的 变换 矩阵 的 形式 指定 1 个 2D 变换 ， 该 属性 涉及 数学 中 的 算 
阵 变 化 ， 可 以 说 该 方法 是 transform 转换 属性 的 根基 ， 一 切 的 Transform 使 用 都 是 由 
matrix 变化 而 来 。 


在 使 用 transform 属性 前 ， 还 有 一 个 非常 关键 的 属性 transform-origin， 用 于 设置 每 次 转化 前 
的 基点 位 置 ， 默 认 基点 位 置 为 中 心 位 置 ， 参 数 可 以 使 用 百 分 值 、px 或 者 方向 值 ( 如 left、right、 
top、center 和 bottom )。 


查看 Transform 示例 ， 使 用 Chrome 浏览 器 打开 Transform.htm 文件 ， 效 果 如 图 7.16 所 示 。 





7.16 Transform 示例 效果 


7.7 过 渡 ( Transition ) 


Transition 用 于 将 CSS 的 属性 值 在 一 定 的 时 间 区 域内 平滑 过 渡 ， 制 作 各 种 动态 的 效果 。 比 
如 ， 将 鼠标 移入 元 素 ， 使 得 元 素颜 色 发 生 渐变 ， 语 法 如 下 : 





各 属性 说 明 如 下 : 


@ transition-property: 指定 当前 元 素 某 个 属性 改变 时 执行 的 过 渡 效 果 。 

@ transition-duration: 指定 转化 过 程 的 持续 时 间 ， 单 位 为 s ( 秒 ) 。 

@ transition-timing-function: 根据 时 间 的 推进 改变 属性 值 的 变换 速率 ， 有 6 种 值 ， 分 别 为 
ease (逐渐 变化 ) 、linear ( 匀速) 、ease-in ( 加速) 、ease-out (减速 ) 、ease-in-out 
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( 先 加 速 后 减速 ) 、cubic-bezier ( 自 定义 贝 塞 尔 曲线 值 ) 。 
@ transition-delay: 设置 延 后 执行 时 间 ， 即 当 元 素 属 性 值 发 生 改 变 后 多 长 时 间 开 始 执行 ， 
单位 为 s ( 秒 ) 。 


查看 Transition 示例 ， 使 用 Chrome 浏览 器 打开 Transition.htm 文件 ， 效 果 如 图 7.17 所 示 。 
将 鼠标 移入 方 框 区 域内 ， 图 中 的 两 个 圆 形 各 自 的 位 置 、 颜 色 、 形 状 发 生变 化 ， 变 化 后 的 效果 


如 图 7.18 所 示 。 
人 | | 





1 OO 
( ) 


WA 











图 7.17 Transition 示例 效果 图 7.18 Transition 示例 变化 后 


了 .号 范岗- 用 Css 3 画 哆 啦 A 梦 


本 节 就 运用 前 面 介绍 的 这 些 功能 来 完成 一 个 综合 实例 一 一 用 CSS 3 画 一 个 哆 啦 A 梦 〈 见 图 
7.19)。 为 了 让 它 在 IE6 下 也 能 看 到 大 致 效果 ， 在 代码 中 做 了 一 些 兼 容 。 


可 
文件 四 编 强 @) 查看 中 中 站 WW 工具 Q) 本 有 各。 馈 择 ” 什 





国 

















图 7.19 在 Firefox 和 下 6 下 用 CSS 3 绘制 的 哆 啦 A 梦 
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7.8.1 头 和 脸 


首先 来 制作 头 和 脸 。 先 放置 一 个 div，class 名 为 doraemon， 以 便 整体 控制 ， 然 后 在 
doraemon 中 添加 一 个 class 名 为 head 的 div，head 包含 eyes 和 face 两 大 块 div， 分 别 绘制 眼 
上 晴 和 上 脸 。 


【代码 7-1】 





哆 啦 A 梦 的 头 不 是 正 圆 的 ， 将 其 设置 为 宽 为 320px、 高 为 300px 的 一 个 椭圆 。 这 里 会 用 到 
border-radius 属性 ， 让 其 变 成 椭圆 型 的 头 ， 用 radial-gradient 填充 一 个 从 右上 角 开 始 的 放射 性 渐 
变 ， 脸 的 左下 角 用 box-shadow 设置 一 个 阴影 模拟 自然 光线 使 之 有 立体 感 ， 除 了 胡子 需要 用 
transform 做 角度 变形 外 ， 其 他 都 是 一 些 线条 和 圆 块 。 


【代码 7-2】 
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7.8.2 ”脖子 和 铃 锚 


需要 注意 脖子 围巾 的 层次 级 别 ， 应 该 放置 在 最 高 层 。 另 外 ， 脖 子 围巾 需要 用 线性 渐变 。 铃 销 
是 圆 形 的 ， 用 border-radius 可 以 完成 ，HTML 代码 如 下 : 


【代码 7-3】 





这 个 choker 放置 在 doraemon 中 的 head 之 后 ， 对 应 的 CSS 3 代码 如 下 : 
【代码 7-4】 





129 





构建 移动 网 站 与 APP: HTML 5 移动 开发 入 门 与 实战 有 


通过 实践 ， 可 以 发 现 阴影 和 渐变 能 够 更 加 逼真 地 模拟 事物 ， 使 之 看 起 来 更 加 自然 、 富 有 
立体 感 。 
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7.8.3 ”身体 和 四 胶 


身体 部 分 主要 有 四 肢 和 白色 肚兜 ， 外 加 肚兜 上 的 魔法 口袋 ， 这 个 是 哆 啦 A 梦 最 经 典 的 识别 
标志 之 一 。 实 现 思 路 也 很 简单 ， 用 和 矩形 绘制 身体 ， 用 圆 绘制 肚兜 ， 用 半圆 绘制 口袋 。 四 肢 也 可 以 
分 解 为 矩形 和 圆 ， 只 是 要 变换 下 角度 即 可 。 


【代码 7-5】 





身体 和 四 肢 的 HTML 代码 结构 并 不 复杂 ， 在 CSS 代码 中 也 仅 需 要 注意 两 腿 之 间 的 颜色 要 深 
一 些 ， 这 样 才 有 立体 感 ， 否 则 就 像 一 张 纸 皮 ， 在 胎 膊 连接 处 用 div 遮挡 一 下 身体 矩形 的 连接 线 ， 
使 之 看 上 去 更 符合 服装 设计 的 常理 。 

接 下 来 看 看 CSS 代码 。 


【代码 7-6】 
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到 这 里 ， 大 功 基本 告 成 ， 在 不 支持 CSS 3 的 IE 6 中 也 能 看 到 一 个 大 概 的 样子 ， 只 是 IE 6 下 
的 机 器 猫 更 像 一 个 “苦瓜 脸 ”。 
7.8.4 让 眼睛 动 起 来 


都 说 眼睛 是 心灵 的 窗户 ， 那 么 眼睛 应 该 更 加 有 活力 才 是 ， 那 就 让 眼睛 动 起 来 吧 ! 利用 
keyframes 设置 一 个 定时 动画 ， 让 black 眼睛 移动 位 置 即 可 ， 详 细 代码 如 下 : 


【代码 7-7】 
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了 .9 ”本章 小 结 


本 章 主要 介绍 了 CSS 3 视觉 辅助 的 特性 ， 通 过 多 个 实际 范例 介绍 了 如 何 使 用 CSS 3 视觉 畏 
助 的 方法 ， 希 望 对 读者 有 一 定 的 帮助 。 
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< 移动 持 性 7 一 一 调用 手机 设备 > 


经 常 调用 手机 摄像 头 的 无 非 两 种 情况 ， 一 是 微 信 的 视频 聊天 ， 二 是 美 图 秀 秀 等 让 照片 更 好 看 
的 APP。 当 我 们 注册 一 个 实名 APP 时 ， 经 常 需 要 设置 头像 。 头 像 一 般 来 源 于 两 个 地 方 ， 一 个 是 
相册 ， 一 个 就 是 调用 手机 摄像 头 自拍 一 个 。 在 生活 中 我 们 经 常会 碰 到 这 类 APP， 本 章 就 来 学 习 
如 何 利 用 HTML 5 调用 手机 摄像 头 。 


HTML 5 调用 手机 摄像 头 


本 例 将 使 用 HTML 5 的 WebRTC 技术 ， 借 助 video 标签 实现 网 页 视频 ， 同 时 利用 Canvas 实 
现 照片 拍摄 。 本 节 示 例 不 能 直接 用 浏览 器 打开 文件 ， 需 要 将 文件 部 署 在 Web 服务 器 上 ， 如 
Apache、Nginx、IIS 等 。 











WebRTC 是 一 项 在 浏览 器 内 部 实时 视频 和 音频 通信 的 技术 ， 标 准 协议 为 WHATWG。 目 的 是 通 
| 过 浏览 器 提供 简单 的 JavaScript 就 可 以 达到 实时 通信 能 力 ， 包 括 音 视频 的 采集 、 编 解码 、 网 络 
传输 、 显 示 等 功能 ， 并 且 还 支持 跨 平台 ， 如 Windows、Linux、Mac、Android 等 。 














部 署 完毕 后 ， 用 Chrome 打开 对 应 的 地 址 ， 在 浏览 器 界面 会 提示 是 否 使 用 摄像 头 ， 并 带 有 两 
个 按钮 ， 即 “允许 ”和 “拒绝 ” 效果 如 图 8.1 所 示 。 
加 I http;//1ocalhost/ 想 要 使 用 您 的 摄像 关 。 | 允许 | | 拒绝 | 


用 HTML5 拍 照 和 摄像 





8.1 ”提示 是 否 使 用 摄像 头 
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点 击 “人 允许” 按钮， 浏览 器 启动 摄像 头 ， 左 侧 video 标签 内 出 现 摄像 头 捕捉 的 画面 ， 如 图 


8.2 所 示 。 


图 8.2 启动 摄像 头 





点 击 “ 快 照 ”按钮 ， 截 取 左 侧 视频 显示 在 右 侧 画布 中 ， 效 果 如 图 8.3 所 示 。 





图 8.3 截取 图 片 

点 击 “ 保 存 ” 按 钮 ， 画 布 图 片 将 被 保存 为 “照片 .png” 以 供 下 载 。 读 者 可 以 自己 体验 ， 本 例 
不 做 图 片 说 明 。 

利用 编辑 器 打开 “8-1. 用 HTML 5 拍照 和 摄像 html” 文 件 ， 代 码 如 下 : 

【代码 8-1】 

01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 Db 省 略 样式 代码 ， 读 者 可 以 参考 下 载 资源 源码 </style> 

05 </head> 

06 <body> 

07 <header><h2> 用 HTML 5 拍照 和 摄像 </h2></header> 

08 <section> 

09 <!-- 关闭 音频 、 显 示 视 频 工具 条 --> 

10 <video width="360" height="240" muted controls></video> 
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代码 第 10 行 添加 用 于 视频 显示 的 video 标签 ， 带 有 一 个 比较 陌生 的 属性 muted， 表 示 关 闭 视 
频 的 声音 。 

代码 第 12 行 添加 用 于 快照 的 canvas 元 素 ， 当 点 击 “ 快 照 ”按钮 时 ， 脚 本 调用 canvas 方法 截 
取 视 频 元 素 当前 的 图 片 ， 并 绘制 于 画布 上 。 

代码 第 26、27 行 获取 摄像 头 的 方法 ， 兼 容 火 狐 浏 览 器 和 Webkit 内 核 浏览 器 ， 语 法 如 下 : 





@ constraints: 支持 video、audio 属性 ， 在 成 功 回调 函数 内 返回 对 应 数据 流 。 
@ successCallback: 成 功 接收 后 回调 返回 媒体 数据 。 
@ errorCallback: 连接 失败 后 回调 返回 错误 对 象 。 








荔 getUserMedia 方法 的 详细 说 明 可 以 参考 网 址 http://dev.w3.org/2011/webrtc/editor/getusermedia.html 
和 httpsydevelopermozilaorglen-US/docyWebRTCmavigatorgetUserMedia。httpy/caniuse.comystream 
网 址 中 罗列 了 目前 浏览 器 的 支持 情况 。 





代码 第 30~38 行 ， 视 频 连 接 成 功 后 执行 回调 。 本 例 在 Chrome 浏览 器 Webkit 核心 下 运行 ， 
使 用 关键 方法 是 window.webkitURL.createObjectURL， 语 法 如 下 : 





@ blob: 媒体 文件 流 对 象 。 

@ objectURL: 返回 对 象 URL， 可 以 被 赋值 于 video 元 素 的 src 属性 。 

代码 第 38 行 执行 video 元 素 的 play 方法 ， 播 放 用 户 摄像 头 拍摄 的 内 容 。 至 此 ， 一 个 简单 的 
WebRTC 功能 的 Web 应 用 就 完成 了 。 

代码 43~47 行 实 现 快照 功能 并 设置 保存 按钮 的 内 容 。 


呈 ,2 HTML 5 调用 手机 相册 


本 节 将 使 用 HTML 5 Plus 技术 实现 调用 手机 相册 的 应 用 。 由 于 不 同 品牌 的 手机 系统 不 一 
样 ， 即 便 同 是 Android 系统 的 手机 ， 定 制 的 版 本 也 略 有 不 同 ， 因 此 实现 的 效果 图 可 能 不 尽 相同 。 
但 这 点 影响 不 大 ， 读 者 只 需要 掌握 使 用 HTML 5 Plus 技术 的 方法 即 可 。 

利用 编辑 器 打开 源 代 码 “8-2.HTML 5 调用 手机 相册 ”目录 下 的 “index.html” 文 件 ， 页 面 代 
码 如 下 : 
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【代码 8-2】 


代码 第 09 一 13 行 定 义 了 打开 手机 相册 的 列表 ， 其 中 第 09 行 代码 <li> 标 签 内 定义 了 一 个 JS 
脚本 方法 clicked(this.id)， 用 于 打开 手机 相册 页 面 ， 而 “this.id ”定义 的 页 面 地 址 就 是 
“plus/gallery.html” 。 
找到 “plus” 目 录 下 的 “gallery.html” 页 面 ， 具 体 代 码 如 下 : 


【代码 8-3】 
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代码 第 149 一 155 行 定义 了 打开 手机 相册 的 功能 按钮 菜单 ， 包 括 单 选 图 片 和 多 选 图 片 多 种 选 
择 功 能 ， 每 一 个 “onclick” 点 击 事件 均 定义 了 JS 函数 方法 ;代码 第 10 一 140 行 实现 了 以 上 各 个 
功能 的 JS 函数 方法 。 

下 面 我 们 测试 运行 一 下 “HTML 5 调用 手机 相册 ”项 目 ， 在 手机 端 打开 应 用 后 界面 效果 如 图 
8.4 所 示 。 

点 击 图 中 的 “Gallery 手机 相册 ”列表 项 ， 则 会 打开 功能 选择 按钮 列表 ， 如 图 8.5 所 示 。 


145 





构建 移动 网 站 与 APP: HTML 5 移动 开发 入 门 与 实战 


HTML5+ 调 用 手机 相册 





Gasery 们 过 和 理 系统 相 岩 ， 如 从 相册 直 过 笠 玫 片 融 央 文件 
保 硬 片 有 寓 姑 袜 作 到 相等 功能 











图 84 HTML 5 调用 手机 相册 主页 图 8.5 HTML 5 调用 手机 相册 功能 列表 
点 击 “ 从 相册 中 单 选 图 片 ” 按 钮 ， 则 会 打开 手机 相册 ， 效 果 如 图 8.6 所 示 。 





图 8.6 手机 相册 内 容 
执行 “长 按 ” 操 作 选 中 满意 的 照片 ， 页 面 底部 “完成 ”按钮 就 会 变 成 高 亮 ， 表 示 被 成 功 激活 。 


HTML 5 调用 手机 通讯 录 


本 节 使 用 HTML 5 Plus 技术 实现 调用 手机 通讯 录 的 应 用 。 利 用 编辑 器 打开 源 代 码 “8- 
3.HTML 5 调用 手机 通讯 录 ” 目 录 下 的 “index.html” 文 件 ， 页 面 代码 如 下 : 
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代码 第 09 一 13 行 定义 了 打开 手机 通讯 录 的 列表 ， 其 中 第 09 行 代码 <li> 标 签 内 定义 了 一 个 JS 
脚本 方法 clicked(this.id)， 用 于 打开 手机 通讯 录 页 面 ， 而 “this.id ”定义 的 页 面 地 址 就 是 
“plus/contacts.html”。 


找到 “plus” 目 录 下 的 “contacts.html” 页 面 ， 具 体 代码 如 下 : 
【代码 8-5】 
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代码 第 14 行 通过 getAddressBook() 函 数 方法 获取 了 手机 通讯 录 ， 执 行 该 操作 时 由 于 通讯 录 
属于 系统 高 级 权限 ， 因 此 系统 会 提示 用 户 是 否 允 许 授予 访问 权限 。 

代码 第 15 行 通过 addressbook.find() 方 法 查询 通讯 录 ， 而 回调 函数 中 的 “contacts” 参 数 包含 
了 获取 的 通讯 录 数 据 。 

代码 第 16 行 通过 contacts.length 参数 获取 了 通讯 录 一 共 包 含 的 项 数 ， 并 通过 一 个 消息 框 进行 
提示 。 

代码 第 17 一 30 行 通过 一 个 for 循环 方法 依次 读 取 了 通讯 录 中 的 每 一 条 数据 ， 并 动态 添加 到 
第 46 和 47 行 定义 的 <ul> 列 表 控 件 中 进行 显示 。 由 于 通讯 录 信息 需要 保密 ， 因 此 本 例 仅仅 打印 出 
通讯 录 的 姓名 参数 〈displayName) 一 项 进行 测试 。 

下 面 我 们 测试 运行 一 下 “HTML 5 调用 手机 通讯 录 ” 项 目 ， 在 手机 端 打开 应 用 后 界面 效果 如 
图 8.7 所 示 。 

点 击 图 中 的 “Contacts 通讯 录 ” 列 表 项 ， 弹 出 一 个 信息 提示 框 ， 如 图 8.8 所 示 。 

点 击 “ 确 定 ” 按 钮 ， 进 入 通讯 录 列 表 界 面 ， 效 果 如 图 8.9 所 示 。 





HTML5+ 调 用 手机 通信 录 


H5Contacts 


通信 录 共 计 : 253 条 . 











图 8.7 HTML 5 调用 手机 通讯 录 主 页 图 8.8 ”通讯 录 项 数 消息 框 图 8.9 通讯 录 列表 界面 








本 章 主要 介绍 了 HTML 5 借助 插件 实现 调用 手机 摄像 类、 相册 及 通讯 录 的 功能 ， 通 过 多 个 
实际 范例 介绍 了 编写 代码 的 方法 ， 希 望 对 读者 有 一 定 的 帮助 。 
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< HTML 5 移动 性 能 优化 > 


传统 对 Web 开发 性 能 的 定义 是 指 页 面 加 载 时 间 。 开 发 一 个 现代 化 的 互联 网 网 站 是 一 项 复杂 
的 任务 ， 需 要 各 种 职能 的 密切 合作 ， 以 应 对 用 户 日 新 月 异 的 需求 。 其 中 ， 网 页 的 性 能 直接 决定 了 
用 户 的 体验 ， 而 随 着 新 型 客户 端 浏览 设备 的 出 现 与 网 站 功能 的 日 益 复 杂 化 ， 对 于 性 能 的 专注 也 达 
到 了 前 所 未 有 的 高 度 。 事 实 上 ， 除 了 页 面 加 载 ， 还 需要 考虑 其 他 几 个 方面 ， 如 图 片 优 化 、CSS 
优化 、 脚 本 优化 等 ， 本 章 将 一 一 介绍 。 








HTML 5 的 性 能 考量 


本 节 介 绍 了 3 种 性 能 考量 指标 ， 即 客户 端 (浏览 器 性能、 网络 性 能 和 开发 效率 ， 提 升 这 三 
方面 性 能 ， 需 要 尽 可 能 减少 页 面 加 载 时 间 、 尽 可 能 减少 HTTP 请 求 和 带宽 的 使 用 、 尽 可 能 复 用 
代码 。 


9.1.1 浏览 器 性 能 

浏览 器 越 来 越 重 视 对 JavaScript 引擎 、CSS 动画 泻 染 处 理 等 方面 的 性 能 优化 和 加 速 。 了 解 济 
览 器 的 各 方面 新 特性 ， 并 加 以 充分 利用 ， 可 以 充分 发 挥 浏览 器 的 便捷 功能 。 

传统 的 网 站 性 能 监测 通常 有 以 下 几 种 方式 : 

@ ”借助 传统 的 开发 者 工具 查看 网 络 请 求 

例如 ， 使 用 浏览 器 的 F12 工具 、Fiddler、Charles 等 ， 通 过 追踪 HTTP 请 求 与 响应 的 时 间 ， 
以 图 形 的 方式 列 出 所 有 资源 的 下 载 情况 。 这 种 方式 依赖 于 人 为 操作 ， 难 以 实现 批量 测试 与 统计 。 

@ ”使 用 侵入 式 的 JavaScript 代码 检测 DOM 事件 的 发 生 时 间 

例如 ， 使 用 DOMContentLoaded 和 document.onreadystatechange 等 ， 这 时 会 在 页 面 的 业务 逻 
辑 之 外 再 加 额外 的 代码 ， 加 重 了 开发 者 与 测试 人 员 的 负担 ， 还 有 可 能 因为 检测 代码 本 身 的 潜在 问 
题 影响 页 面 的 性 能 ， 甚 至 影响 页 面 主体 功能 。 
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@ ”使 用 第 三 方 的 服务 与 工具 


例如 ， 使 用 WebPagetest、Pingdom 等 ， 这 些 服务 通常 能 够 实现 在 不 同 浏览 器 和 不 同 地 域 进 
行 测试 ， 并 且 为 用 户 提供 一 些 优化 建议 。 但 某 些 服务 需要 排队 等 待 ， 并 且 多 次 测试 结果 之 间 往 往 
区 别 较 大 。 

除 此 之 外 ， 以 上 各 种 方式 的 测量 指标 都 比较 单一 ， 基 本 只 能 起 到 计时 和 流量 计算 的 作用 。 对 
于 其 他 一 些 指 标 ， 例 如 电池 状态 等 方面 则 没有 监测 体现 。 并 且 ， 传 统 的 方法 难以 实现 自动 化 ， 以 
及 在 持续 集成 流程 中 统计 测试 结果 。 

W3C Web 性 能 工作 小 组 与 各 浏览 器 厂商 都 已 认识 到 性 能 对 于 Web 开发 的 重要 性 。 为 了 解决 
当前 性 能 测试 的 困难 ，W3C 推出 了 一 套 性 能 API 标准 ， 各 种 浏览 器 对 这 套 标 准 的 支持 如 今 也 逐 
渐 成 熟 起 来 。 这 套 API 的 目的 是 简化 开发 者 对 网 站 性 能 进行 精确 分 析 与 控制 的 过 程 ， 最 终 实现 
性 能 的 提高 。 例 如 ，Navigation Timing API (导航 计时 )， 能 够 帮助 网 站 开发 者 检测 真实 用 户 数据 
(CRUM)， 例 如 带宽 、 延 迟 或 主页 的 整体 页 面 加 载 时 间 。 开 发 者 可 以 用 以 下 JavaScript 代码 检测 页 
面 的 性 能 : 


Navigation Timing 的 目的 是 用 于 分 析 页 面 整 体 性 能 指标 。 如 果 要 获取 个 别 资源 〈 例 如 JS、 


片 ) 的 性 能 指标 ， 请 使 用 Resource Timing API。 





通过 Page Visibility API《〈 页 面 可 见 性 )， 网 站 开发 者 能 够 以 编程 方式 确定 页 面 的 当前 可 见 状 
态 ， 从 而 使 网 站 能 够 更 有 效 地 利用 电源 与 CPU。 例 如 ， 当 页 面 获得 或 失去 焦点 时 ， 文 档 对 象 的 
visibilitychange 事件 便 会 被 触发 : 





这 一 事件 对 了 解 页 面 的 可 见 状态 十 分 有 用 ， 举 例 来 说 ， 用 户 可 能 会 同时 打开 多 个 浏览 器 标 
签 ， 而 你 希望 只 在 用 户 显示 你 的 网 站 页 面 时 才 进 行 某 些 操作 比如 播放 一 段 音频 文件 或 执行 一 段 
JavaScript 动画 )， 就 可 以 通过 这 一 事件 进行 触发 。 对 于 移动 设备 来 说 ， 如 果 用 户 在 某 个 标签 中 打 
开 了 你 的 网 站 ， 但 正在 另 一 个 标签 中 浏览 其 他 内 容 时 ， 这 一 特性 能 够 节省 该 设备 的 电池 消 
耗 。 

其 他 部 分 API 功能 简介 : 
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@ Resource Timing (资源 计时 ) 
对 单个 资源 〈 如 图 片 ) 的 计时 ， 可 以 对 细 粒 度 的 用 户 体验 进行 检测 。 
@ Performance Timeline (性 能 时 间 线 ) 


以 一 个 统一 的 接口 获取 由 Navigation Timing、Resourcing Timing 和 User Timing 所 收集 的 性 
能 数据 。 


@ Battery Status ( 电池 状态 ) 


能 够 检测 当前 设备 的 电池 状态 ， 例 如 是 否 正在 充电 、 电 量 等 级 等 。 可 以 根据 当前 电量 决定 
是 否 显示 某 些 内 容 〈 例 如 视频 、 动 画 等 )， 对 于 移动 设备 来 说 非常 实用 。 


@ UserTiming (用 户 计 时 ) 

可 以 对 某 段 代码 、 函 数 进行 自 定义 计时 ， 以 了 解 这 段 代码 的 具体 运行 时 间 ， 类 似 于 stop 
watch 的 作用 。 

@ Beacon (灯塔 ) 

可 以 将 分 析 结果 或 诊断 代码 发 送 给 服务 器 ， 采 用 异步 执行 的 方式 ， 不 会 影响 页 面 中 其 他 代 
码 的 运行 ， 对 于 收集 测试 结果 并 进行 统计 分 析 来 说 是 一 种 十 分 便利 的 工具 。 

@ Animation Timing ( 动画 计时 ) 

通过 requestAnimationFrame 函数 让 浏览 器 精通 地 控制 动画 的 帧 数 ， 能 够 有 效 地 配合 显示 器 
的 刷新 率 ， 提 供 更 平滑 的 动画 效果 ， 减 少 对 CPU 和 电池 的 消耗 。 


@ Resource Hits (资源 提示 ) 


通过 html 属性 指定 资源 的 预 加 载 ， 例 如 在 浏览 相册 时 能 够 预先 加 载 下 一 张 图 片 ， 加 快 翻 页 
的 显示 速度 。 


@ Frame Timing ( 帧 计时 ) 
通过 一 个 接口 获取 与 帧 相关 的 性 能 数据 ， 例 如 每 秒 帧 数 和 TIF。 该 标准 目前 尚未 被 支持 。 
®@ 。 Navigation Error Logging ( 导航 错误 日 志 记 录 ) 


通过 一 个 接口 存储 及 获取 与 某 个 文档 导航 相关 的 错误 记录 。 该 标准 目前 尚未 被 支持 。 
表 9-1 列举 了 当前 主流 浏览 器 对 性 能 API 的 支持 ， 其 中 标注 星 号 的 内 容 并 非 来 自 于 Web 性 
能 工作 小 组 。 
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表 9-1 各 浏览 器 对 性 能 API 的 支持 情况 


规范 Internet Firefox Chrome 1 
Explorer 


Navigation Timing 31 全 部 8 26 8( 不 包括 | 4.1 
High Resolution 31 全 部 8 26 8 (不 包括 | 4.4 
Timing 8.1 

Page Visibility 站 一 一 一 26 大 44 
Resource Timing 全 部 - 4.4 
| 








User Timing [lo |- [aw |-. |» - 4.4 
Beacon | | Ja |. |» | 


AnimtionTimng |10 |31 | 全 部 |e |26 I 44 


El 于 时 各 时 人 到 | | 


Frame Timing - - 
i 
ogging 

WebPp* |-. |. |saw |. |»x | 41 














而 
sreset attribute * 

其 他 更 详细 的 有 关 Web 性 能 API 的 内 容 可 参考 https://www.w3.org/wiki/Web_Performance/ 
Publications。 


9.1.2 网络 性 能 


为 用 户 节 省 流量 是 移动 开发 中 需要 考虑 的 问题 。 在 前 端 技术 中 ， 需 要 一 些 既 能 有 效 节 省 带宽 
又 能 让 页 面体 验 良 好 的 策略 。 

常见 的 网 络 性 能 问题 有 如 下 几 种 : 

(1) DNS 问题 

DNS 问题 主要 有 两 种 ， 一 是 DNS 被 动 持 或 者 失效 ， 例 如 2015 年 初 业 内 比较 知名 的 就 有 
Apple 内 部 DNS 问题 导致 App Store、iTunes Connect 账户 无 法 登录 。 二 是 DNS 解析 慢 或 者 失 
败 ， 例 如 国内 中 国运 营 商 网 络 的 DNS 就 很 慢 ， 一 次 DNS 查询 的 耗 时 甚至 都 能 赶 上 一 次 连接 的 
耗 时 ， 尤 其 是 在 2G 网 络 情况 下 ，DNS 解析 失败 是 很 常见 的 。 因 此 如 果 直 接 使 用 DNS， 对 于 首 
次 网 络 服务 请 求 耗 时 和 整体 服务 成 功率 都 有 非常 大 的 影响 。 


(2) TCP 连接 问题 
DNS 成 功 后 获得 目标 IP 地 址 ， 便 可 以 发 起 TCP 连接 。HTTP 协议 的 网 络 层 也 是 TCP 连 
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接 ， 因 此 TCP 连接 的 成 功 和 耗 时 也 成 为 网 络 性 能 的 一 个 因素 。TCP 连接 中 常见 的 问题 有 TCP 端 
口 被 封 ( 例 如 对 非 HTTP 常见 端口 80、8080、443 的 封锁 )， 以 及 TCP 连接 超时 时 长 问题 。 端 口 
被 封 ， 直 接 导 致 无 法 连接 ;连接 超时 时 长 过 短 ， 在 低速 网 络 上 可 能 总 是 无 法 连接 成 功 ， 连接 超 时 
过 长 ， 又 有 可 能 导致 用 户 长 时 间 等 待 ， 用 户 体验 差 。 很 多 时 候 尽快 重新 发 起 一 次 连接 会 更 快 ， 这 
也 是 移动 网 络 带 宽 不 稳定 情况 下 的 一 个 常见 情况 。 

(3) 传输 负载 过 大 

传 得 多 就 传 得 慢 ， 如 果 没 做 过 特别 优化 ， 传 输 负载 可 能 会 比 实际 所 需要 的 大 很 多 ， 对 于 整体 
网 络 服务 耗 时 影响 非常 大 。 因 此 ， 尤 其 在 移动 端 ， 特 别 需要 注意 控制 页 面体 积 ， 避 免 负载 过 大 。 

(4) 复杂 的 国内 外 网 络 情况 

国内 运营 商 互联 和 海外 访问 国内 带宽 低 、 传 输 慢 的 问题 也 是 非常 棘手 的 。 

针对 上 面 这 些 问题 ， 在 复杂 的 网 络 环境 情况 下 ， 需 要 针对 性 地 逐一 优化 ， 以 期 达到 目标 : 连 
得 上 、 连 得 快 、 传 输 时 间 短 。 常 见 的 优化 策略 包括 优化 DNS 解析 和 缓存 、 网 络 质量 检测 根据 
网 络 质量 来 改变 策略 )、 减 少数 据 传输 量 等 。 在 本 书 中 ， 我 们 将 会 介绍 一 些 关于 网 络 性 能 优化 的 
实例 ， 例 如 图 片 延迟 策略 、 优 化 加 载 等 方面 的 实例 ， 请 感 兴趣 的 读者 继续 向 下 阅读 。 


9.1.3 ”开发 效率 


图 9.1 是 开发 人 员 都 能 看 懂 的 图 ， 这 个 图 意味 着 更 简洁 的 APP 页 面 、 更 好 的 代码 复 用 ， 还 
有 模块 化 。 本 小 节 正 是 从 整体 结构 上 来 说 明 如 何 提高 开发 效率 。 


图 9.1 开发 效率 提升 的 必要 性 
@ 。 库 和 框架 的 选 型 ( 见 图 9.2) 
现 如 今 前 端 可 谓 包 罗 万 象 ， 产 品 形态 丰富 多 彩 ， 尽 管 Web 应 用 的 复杂 程度 与 日 俱 增 ， 用 户 
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对 前 端 界 面 也 提出 了 更 高 的 要 求 ， 但 时 至 今日 仍然 没有 多 少 前 端 开发 者 会 从 软件 工程 的 角度 去 思 


考 前 端 开发 ， 来 助力 团队 的 开发 效率 。 前 端 工程 建设 的 第 一 项 任务 就 是 根据 项 目 特征 进行 技术 选 
型 。 










Animate.css UNDERSCOREJS 


Bootstrap 网 BACKBONEJ 





四 


Font Awesome 





TT normalecss he LE 像 NcurAR's 


图 92 库 和 框架 的 选 型 


\ | 
GRUNT gulp.js 


图 9.3 构建 优化 
@ JavaScript/CSS 模块 化 开发 ( 见 图 9.4) 


@ ”构建 优化 ( 见 图 9.3) 





分 而 治之 是 软件 工程 中 的 重要 思想 ， 是 复杂 系统 开发 和 维护 的 基石 ， 这 一 点 放 在 前 端 开发 中 
同样 适用 。 在 解决 了 基本 开发 效率 、 运 行 效率 问题 之 后 ， 需 要 使 用 模块 化 开发 来 解决 维护 效率 的 
问题 。 例 如 ，CSS 在 less、sass、stylus 等 预 处 理 器 的 import/mixin 特性 支持 下 实现 的 模块 化 。 


<header class="header"> 
<img class="header_logo” src="logo.png"> 
<h2 class="header_ title">Title</h2> 
<button class="header_menu"> 
Settings 
</button> 
</header> 














“header { ... } 

.header_logo { ... } 
.header_title { ... } 
.header_menu { ... } 


S(' .header_menu’).click(function(){ 
alert('Clickl'); 





@ ”组件 化 开发 ( 见 图 9.5) 


页 面 上 每 个 独立 的 可 视 / 可 交互 区 域 均 视 为 一 个 组 件 。 组 件 化 开发 具有 较 高 的 通用 性 ， 无 论 
是 前 端 泻 染 的 单 页 面 应 用 还 是 后 端 模板 泻 染 的 多 页 面 应 用 ， 组 件 化 开发 的 概念 都 能 适用 。 由 于 系 
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统 功 能 被 分 治 到 独立 的 模块 或 组 件 中， 粒度 比较 精细 ， 组 织 形 式 松散 ， 因 此 开发 者 之 间 不 会 产生 
开发 时 序 的 依赖 ， 大 幅 提升 并 行 的 开发 效率 ， 理 论 上 允许 随时 加 入 新 成 员 认领 组 件 开发 或 维护 工 
作 ， 也 更 容易 支持 多 个 团队 共同 维护 一 个 大 型 站 点 的 开发 。 





图 9.5 组 件 化 开发 


要 时 刻 想 着 怎样 来 提高 开发 效率 ， 开 发 效率 的 提高 是 工作 中 一 个 良性 循环 的 开始 。 除 此 之 
外 ， 注 重 业务 知识 的 学 习 ， 做 任何 系统 都 避免 不 了 有 业务 背景 ， 熟 练 地 了 解 业务 知识 可 以 更 清楚 
地 知道 系统 在 做 什么 。 人 是 团队 最 宝贵 的 财富 ， 每 个 人 的 思维 方式 决定 了 团队 合作 的 效率 和 结 
果 ， 团 队 合作 依靠 高 素质 的 团队 成 员 ， 而 每 个 人 的 协作 理念 合 在 一 起 就 是 开发 模式 稳固 的 基石 。 





日 .2 加 载 优化 


对 于 一 个 移动 产品 ， 功 能 无 疑 很 重要 ， 但 是 性 能 同样 是 用 户 体验 中 不 可 或 缺 的 一 环 。 当 用 户 
能 够 在 1~2 秒 内 打开 一 个 移动 页 面 并 看 到 信息 的 展示 ， 或 者 能 够 开始 进行 下 一 步 的 操作 时 ， 用 
户 会 觉得 速度 还 是 可 以 接受 的 ， 如 果 页 面 在 2~5 秒 后 才 进 入 可 用 的 状态 ， 用 户 的 耐心 会 逐渐 丧 
失 ， 如 果 一 个 界面 超过 5 秒 甚至 更 久 才 能 显示 出 来 ， 用 户 基 本 是 无 法 忍受 的 ， 也 许 有 一 部 分 用 户 
会 退出 重新 进入 ， 但 更 多 的 用 户 会 直接 放弃 使 用 。 对 于 网 站 的 开发 人 员 来 说 ， 提 升 用 户 体验 是 一 
个 网 站 的 核心 价值 ， 其 中 提高 网 站 的 加 载 速度 是 最 基本 的 用 户 体验 。 





9.2.1 减少 HTTP 请 求 


HTTP (HyperText Transfer Protocol) 是 一 套 计算 机 通过 网 络 进行 通信 的 规则 ， 使 HTTP 客户 
端 〈 如 浏览 器 ) 能 够 从 HTTP 服务 器 请 求 信息 和 服务 。 一 个 完整 的 HTTP 请 求 所 需 经 历 的 流程 
大 致 如 图 9.6 所 示 。 

通过 图 9.6 可 以 看 出 ， 一 个 HTTP 请 求 所 经 历 的 流程 可 以 有 3 种 类 型 ， 在 本 地 存在 HOST 或 
存在 DNS 缓存 的 情况 下 ， 流 程 会 比较 简单 。 
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2 客户 端 输入 地 址 : 32 
http//www.xxx.com 


本 地 
DNS 客 户 端 是 否 
存在 缓存 





96 HTTP 流程 图 


流程 @) 所 示 的 在 一 次 完整 的 HTTP 通信 过 程 中 ， 客 户 端 与 服务 器 之 间 将 通过 7 个 步骤 建立 
HTTP 链接 ， 每 个 步骤 所 需 经 历 的 行为 如 图 9.7 所 示 。 


客户 端 服务 器 
图 建立 TCP 连 接 


和 @ 客户 端 (浏览 跟 ) 向 服务 器 发 送 请 求 命令 
作客 户 端 (浏览 器) 发 送 请 求 头 信息 


服务 器 应 从 @ 

服务 器 发 送 应 答 头 信息 个 
服务 器 向 浏览 器 发 送 数据 @ 
服务 器 关闭 TCP 连 接 @ 


图 9.7 建立 HTTP 链接 的 7 个 步骤 


图 9.7 中 展示 了 完成 建立 HTTP 链接 的 7 个 步骤 。 其 中 ， 在 步骤 @ 中 ， 一 旦 建立 了 TCP 连 
接 ， 客 户 端 〈 浏 览 器 ) 就 向 服务 器 发 送 请 求 命令 ， 命 令 形式 如 下 : 

01 GET/example/hello.html HTTP/1.1 

在 步骤 弗 中 ， 客 户 端 向 服务 器 发 出 请 求 后 ， 服 务 器 会 给 客户 机 回 送 应 答 ， 例 如 : 


01 HTTP/1.1 200 OK 
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应 答 的 第 一 部 分 HTTP/1.1 是 协议 的 版 本 号 ，200 是 应 答 状态 码 。 一 般 情况 下 ， 一 旦 Web 服 
务 器 向 浏览 器 发 送 了 请 求 数据 ， 就 要 关闭 TCP 连接 。 但 是 ， 如 果 浏览 器 或 者 服务 器 在 其 头 信息 
加 入 了 下 面 这 行 代码 : 


01 Connection:keep-alive 


TCP 连接 在 发 送 后 将 仍然 保持 打开 状态 。 因 此 ， 浏 览 器 可 以 继续 通过 相同 的 连接 发 送 请 
求 。 保 持 连 接 节省 了 为 每 个 请 求 建立 新 连接 所 需 的 时 间 ， 还 节约 了 网 络 带 宽 。 

在 HTTP 协议 下 ， 浏 览 器 从 服务 器 接收 到 text/html 类 型 的 代码 ， 浏 览 器 开始 泻 染 HTML， 
并 获取 其 中 内 嵌 资 源 地 址 ， 浏 览 器 再 分 别 发 起 请 求 来 获取 这 些 资源 ， 并 在 浏览 器 中 泻 染 显示 。 例 
如 ， 在 浏览 器 地 址 栏 中 输入 某 网 站 链接 ， 通 过 浏览 器 控制 台 的 Network 面板 即 可 查看 所 发 生 的 
HTTP 请 求 列表 ， 如 图 9.8 所 示 。 


[Euer Hide data URLs CW xhR Js css Img Media Font Doc Ws other 








Name Status Size 
Path Method Text Type Content Timeline - Start Time 10,00s 
index.html 200 12.7KB 
S| /trip/home rn me 46.9KB 国 | 
| trip/h5-home. 200 48.0KB 
oaicdncom EH ox Sqlesheet 88.8KB ml 
] trip/h5-home,, 200 61.6KB 
| galicdn.com GET OK ia | 183KB Wm 
smartbannerUljs 200 3.0KB | 
galedncomm.. GET ox script 8.9KB 
| aimagwpPng… | ceT 总 png (from cache) 
一 Queueing 035ms 
Q datasimage/png... CE 2 攻 (rom cache) | saned 0.76ms 
data:image/png... CET 200 png (from cache) | Request sent 0.28ms 
一 OK Waiting (TTFB) 487.20ms 
e data:image/png... GET 2 pag Pan Content Download ? 9.l2ms 
一 Explanation 497.71 ms 
加 pc On (from cache) | 
一 一 


图 9.8 资源 请 求 列表 


从 图 9.8 中 可 以 看 出 ， 只 有 10%~20% 的 时 间 花 费 在 请 求 HTML 文档 上 ， 剩 下 的 80%~90% 
的 时 间 主 要 用 在 其 他 资源 (图片 、 脚 本 、 样 式 表 等 请 求 的 开销 上 。 如 今 很 多 无 线 页 面 已 不 再 是 
传统 的 “Web 页 面 ” 而 是 更 接近 “ 单 页 应 用 ”。 随 着 应 用 复杂 度 的 逐渐 增加 ， 所 需 加 载 的 除 图 
片 等 静态 数据 外 ， 动 态 数据 也 会 越 来 越 多 。 如 果 想 追求 高 质量 的 单 页 应 用 ， 对 这 些 请 求 的 优化 势 
在 必 行 ， 可 以 从 域名 收敛 和 减少 HTTP 请 求 数 两 个 方面 进行 优化 。 

(1) 域名 收敛 

如 果 在 页 面 中 引入 了 各 种 来 自 不 同 域名 的 资源 ， 注 意 每 增加 一 个 域名 都 会 增加 一 次 DNS 域 
名 解析 开销 。 在 复杂 的 移动 互联 网 网 络 环境 下 ， 不 同 域名 的 解析 速度 可 能 会 相差 数 十 倍 。 所 以 需 
要 有 意识 地 收敛 页 面 资 源 所 需 解析 的 域名 数 , 特别 是 会 阻塞 页 面 泻 染 的 CSS、JavaScript、Font 等 
资源 。 有 一 些 性 能 体验 糟糕 的 页 面 ， 究 其 原因 是 引入 的 资源 域名 解析 速度 很 慢 或 完全 不 能 
确 解析 。 
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画 一 个 页 面 所 产生 的 域名 解析 数 不 能 超过 5 个 。 | 














在 移动 网 络 环境 下 ， 减 少 非 必 要 DNS 请 求 ， 将 相关 域名 收敛 成 一 个 ， 可 以 充分 利用 DNS 
缓存 ， 进 而 可 以 减少 打开 页 面 时 间 。 

(2) 减少 请 求 数 

在 优化 了 需要 解析 的 域名 数 后 ， 需 要 关注 页 面 资源 请 求 数目 。 如 果 是 长 期 维护 的 产品 型 页 
面 ， 在 页 面 中 引入 的 静态 资源 除 最 通用 的 基础 库 外 ， 需 要 按 依 赖 顺 序 将 静态 资源 进行 合并 压缩 。 

- 般 是 CSS 和 JavaScript 请 求 各 合并 成 一 个 。 针 对 营销 活动 页 面 ， 甚 至 可 以 把 依赖 的 CSS 和 

JavaScript 资源 内 联 入 页 面 ， 从 而 实现 除 图 片 外 的 其 余 资源 在 第 一 次 HTTP 请 求 时 就 能 获得 。 

减少 Web 响应 时 间 的 第 一 条 规则 就 是 减少 页 面 资源 的 数量 ， 进 而 较 少 HTTP 请 求 的 次 数 。 
常见 的 减少 HTTP 请 求 数量 的 策略 有 如 下 方法 : 


@ 将 脚本 、 样 式 表 合 并 。 

在 开发 时 ， 常 常 按照 模块 拆 分 编写 逻辑 代码 ， 以 便于 复 用 和 维护 ， 而 在 发 布 时 ， 需 将 多 个 模 
块 JavaScript、CSS 分 别 合 并 成 单一 文件 。 在 工程 化 开发 过 程 中 ， 通 常 可 以 使 用 工具 完成 对 所 依 
赖 的 模块 资源 的 脚本 、 样 式 表 的 合并 功能 。 

@ CSS Sprites。 

CSS Sprites，CSS 精灵 ， 也 称 为 CSS 图 片 拼合 技术 ， 即 将 多 个 小 图 片 拼凑 在 一 起 形成 一 张 
新 的 合集 图 片 ， 然 后 通过 CSS 的 background-image、background- repeat、background-position 的 
组 合 进行 背景 定位 ，background-position 可 以 用 数字 精确 地 定位 到 所 需要 的 图 片区 域 。 

利用 CSS Sprites 能 很 好 地 减少 网 页 的 HTTP 请 求 ， 从 而 大 大 地 提高 页 面 性 能 ， 这 是 CSS 
Sprites 最 大 的 优点 ， 也 是 其 被 广泛 传播 和 应 用 的 主要 原因 。CSS Sprites 能 减少 图 片 的 字 节 ， 同 
时 使 用 了 CSS Sprites 技术 后 ， 如 需 更 换 页 面 风格 将 更 加 方便 ， 只 需要 在 一 张 或 少 张 图 片上 修改 
图 片 的 颜色 或 样式 ， 整 个 网 页 的 风格 就 可 以 改变 。 修 改 起 来 简单 有 效 。 

那么 ， 是 不 是 将 页 面 上 所 有 的 图 片 都 拼接 起 来 ， 仅 保留 一 张 合集 图 片 才 是 最 好 的 呢 ? 显然 不 
是 。 在 进行 图 片 拼 接 时 ， 也 有 一 些 拼接 技巧 。CSS Sprites 在 维护 的 时 候 ， 如 果 仅 仅 是 替换 颜色 
风格 ， 还 是 比较 容易 的 ， 如 果 要 修改 、 蔡 换 图 片 ， 就 比较 麻烦 。 如 果 页 面 背景 有 少许 改动 ， 一 般 
就 改 这 张 合 并 的 图 片 ， 无 须 改 的 地 方 最 好 不 动 ， 这 样 避 免 改 动 更 多 的 CSS。 如 果 在 原来 的 地 方 
放 不 下 ， 最 好 是 往 合集 中 改 ， 不 用 担心 下 方 增加 图 片 ， 但 是 这 样 一 来 ， 合 集 图 片 的 字 节 就 增加 
了 ， 并 且 还 要 修改 对 应 的 CSS 样式 代码 ， 维 护 成 本 较 高 。 

因此 ， 合 理 利用 CSS Sprites， 切 勿 滥用 。 拼 合 的 图 片 不 能 太 多 ， 并 且 不 能 太 大 ， 拼 凑 在 一 
块 的 图 片 就 类 似 于 同步 请 求 ， 抑 制 了 浏览 器 并 行 请 求 资源 的 能 力 ， 往 往 一 张 比 较 大 的 背景 图 片 需 
要 切割 成 几 张 小 一 点 的 图 片 ， 就 是 因为 可 以 并 行 请 求 且 不 容易 请 求 失败 。 


@ 图 片 地 图 。 
图 片 地 图 技术 是 将 一 张 图 片 分 区 域 ， 不 同 的 区 域 指向 不 同 的 URL 地 址 。 假 设 5 个 导航 栏 菜 
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单 都 有 不 同 的 图 片 ， 如 果 不 通 过 图 片 地 图 来 实现 ， 就 需要 5 张 图 片 分 别 指向 5 个 URL， 需 要 请 
求 5 次 才能 完成 导航 栏 的 泻 染 。 

一 般 来 说 ， 减 少 HTTP 请 求 可 以 充分 利用 DNS 请 求 结 果 的 缓存 ， 从 而 减少 DNS 的 查找 时 
间 、 减 少 服务 器 的 压力 、 减 少 HTTP 请 求 头 (减少 服务 器 响应 的 应 答 头 部 信息 )。 据 统计 ，40% 
以 上 的 浏览 是 第 一 次 访问 ， 不 带 资源 缓存 ， 因 此 对 于 初次 访问 的 浏览 者 来 说 将 会 减少 HTTP 请 
求 ， 提 高 体验 效果 。 


9.2.2 ”充分 利用 缓存 


使 用 缓存 可 以 减少 向 服务 器 的 请 求 数 ， 节 省 加 载 时 间 ， 所 以 所 有 静态 资源 都 要 在 服务 器 端 设 
置 缓存 ， 并 且 尽 量 使 用 长 Cache。 长 Cache 资源 的 更 新 可 使 用 不 同时 间 戳 来 更 新 。 合 理 设置 资源 
的 过 期 时 间 ， 尤 其 对 一 些 静态 的 不 需要 改变 的 资源 ， 将 其 缓存 过 期 时 间 设 置 得 长 一 些 。 


1. 使 用 CDN 


CDN 是 一 组 分 布 在 多 个 不 同 地 理 位 置 上 的 Web 服务 器 ， 当 服务 器 离 用 户 更 近 一 点 时 ， 请 求 
的 响应 时 间 就 能 够 缩短 一 点 ，CDN 根据 用 户 到 服务 器 的 远近 程度 或 者 响应 速度 来 决定 响应 服务 
器 。 在 实施 地 理 上 分 散 内 容 ， 分 布 式 架构 和 CDN 都 是 一 个 方向 ， 但 是 分 布 式 架 构 带 来 的 工作 量 
和 复杂 程度 都 要 比 CDN 大 。 

CDN 一 般 具有 海量 的 带宽 吞吐 能 力 和 安全 解决 方案 ， 能 够 抵御 蛮 力 的 分 布 式 攻击 和 渗透 攻 
击 ; 我 们 知道 Cookie 是 跟 域 名 挂钩 了 ， 因 为 CDN 域名 与 网 站 域名 不 一 样 ， 所 以 在 向 CDN 请 求 
静态 资源 的 时 候 就 不 会 带 着 网 站 的 Cookie 等 头 部 信息 往返 ， 大 大 减少 了 这 部 分 开销 。 使 用 CDN 
的 好 处 不 仅 如 此 ， 在 文件 缓存 上 ，CDN 也 带 来 了 不 少 好 处 。 例 如 ， 当 多 个 项 目 都 使 用 了 同一 个 
资源 库 时 ， 浏 览 过 其 中 一 个 应 用 之 后 ， 该 资源 库 的 脚本 和 样式 文件 就 被 缓存 下 来 了 ， 再 浏览 其 他 
应 用 的 时 候 ， 使 用 本 地 缓存 文件 即 可 ， 因 为 不 同 项 目 使 用 的 库 是 同一 个 地 址 。 


2. 添加 缓存 头 


浏览 器 使 用 缓存 来 减少 HTTP 的 请 求 数量 ， 使 得 Web 页 面 加 载 更 快 。 对 于 实时 性 不 高 的 资 
源 ， 服 务 器 通过 向 其 添加 缓存 头 部 信息 ， 告 诉 客户 端的 浏览 器 可 以 使 用 缓存 在 浏览 器 本 地 的 组 
件 。 缓 存 头 部 信息 根据 HTTP 1.0 和 HTTP 1.1 分 为 以 下 两 种 。 





(1) Expires 

Expires 存储 的 是 一 个 用 来 控制 缓存 失效 的 日 期 。 当 浏览 器 看 到 响应 中 有 一 个 Expires 头 时 ， 
就 会 和 相应 的 组 件 一 起 保存 到 缓存 中 ， 只 要 组 件 没 有 过 期 ， 浏 览 器 就 会 使 用 缓存 版 本 而 不 会 进行 
任何 的 HTTP 请 求 。Expires 设置 的 日 期 格式 必须 为 GMT (格林尼治 标准 时 间 )， 例 如 Expires: 
Fri Jan 23 2016 15:48:31 GMT+0800。 这 种 方式 只 能 使 用 一 个 特定 时 间 ， 即 截止 时 间 。 

(2) Cache-Control 

例如 : Cache-Control: max-age=36000000。max-age 是 以 秒 为 单位 的 ， 表 示 可 以 缓存 多 久 。 
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在 HTTP 1.0 的 时 候 ， 如 果 要 取消 缓存 可 以 通过 Pragma: no-cache 头 来 告诉 浏览 器 ; 在 HTTP 
1.1 的 时 候 ， 通 过 Cache-Control: no-cache。 例 如 ，PHP 可 以 在 任何 Web 服务 器 (UNIX 或 
Windows) 或 Apache 模块 上 作为 CGI 使 用 ， 可 以 通过 Header0 函 数 设置 HTTP 头 信息 。 例 如 ， 
通过 以 下 PHP 代码 创建 Cache-Control 头 ， 并 将 其 过 期 时 间 设 置 为 3 天 : 

01 <?php 

02 Header("Cache-Control: must-revalidate"); 


04 S$offset = 60 * 60 * 24 * 3; 

05 S$ExpStr = "Expires:".gmdate("D, d MY H:i:s", time() + $offset)."GMT"; 
06 Header($ExpStr); 

OR 


充分 利用 缓存 ， 可 以 总 结 为 如 下 几 个 方面 : 


@ ”缓存 一 切 可 缓存 的 资源 。 
@ ”使 用 长 Cache。 
@ 使 用 外 联 式 引 用 CSS、JavaScript。 


9.2.3 压缩 


减少 资源 大 小 不 仅 可 以 减少 存储 空间 ， 还 可 以 在 网 络 传输 文件 时 减少 传输 时 间 、 加 快 网 页 显 
示 速 度 。 因 此 要 对 HTML、CSS、JavaScript 等 资源 进行 代码 压缩 。 


1. 文本 数据 压缩 


文本 数据 (HTML、CSS、JavaScript〉 的 优化 与 压缩 分 为 3 个 阶段 ， 即 发 布 准备 〈 去 除 注 
释 ， 合 并 CSS， 去 除 不 会 被 执行 的 JavaScript 代码 块 )、 编 译 期 压缩 (合并 文件 ， 去 除 空格 ， 混 
淆 ) 和 传输 阶段 压缩 (gzip)。 

gzip 是 GNUzip 的 缩写 ， 是 使 用 无 损 压 缩 算 法 的 一 种 ， 最 早 用 于 UNIX 系统 的 文件 压缩 ， 现 
在 已 经 成 为 Web 上 使 用 最 为 普遍 的 数据 压缩 格式 之 一 。gzip 开启 以 后 会 将 输出 到 用 户 浏览 器 的 
数据 进行 压缩 处 理 ， 减 小 通过 网 络 传输 的 数据 量 、 提 高 浏览 的 速度 。 在 服务 器 上 开启 gzip 压 
缩 ， 一 般 纯 文本 内 容 可 压缩 到 原 大 小 的 40%。 

在 移动 端 分 秒 必 争 的 网 络 环境 中 ， 任 何 体积 的 减少 都 能 够 带 来 令 人 意 想不到 的 效果 。 如 图 
9.9 所 示 的 阿里 旅行 首页 ，HTML 文件 在 gzip 前 为 46.9KB， 开 启 gzip 之 后 仅 为 12.7KB， 压 缩 后 
的 大 小 仅 为 压缩 前 文件 的 27%， 压 缩 效果 非常 显著 。 
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2. 图 片 压缩 


在 不 同 的 场景 下 会 接触 不 同 的 图 像 文件 类 型 ， 例 如 大 多 数 相 机 和 智能 手机 都 采用 JPEG 格 
式 ，OS X 系统 截屏 输出 PNG 格式 文件 ， 多 种 图 片 处 理 软件 ， 例 如 Adobe Photoshop、 
Pixelmator、Acorn 和 GIMP 等 ， 可 以 将 图 片 保存 为 多 种 格式 。 


@ JPEG/JPG 


JPEG/JPG 图 片 格式 是 通用 的 有 损 压 缩 格式 ， 主 要 用 于 数码 图 片 。 它 将 图 片 的 每 个 像素 分 解 
成 8X8 的 栅 格 ， 然 后 对 每 个 棚 格 的 数据 进行 压缩 处 理 ， 通 过 特殊 的 算法 用 附近 的 颜色 填充 机 
格 ， 隐 藏 细节 。 用 户 可 以 设置 质量 级 别 ， 从 0 到 100， 数 字 越 少 图 片 质量 就 越 差 。 例 如 ， 平 板 电 
脑 、 智 能 手机 或 单反 相机 拍照 时 ， 图 片 将 保存 为 JPEG 格式 。 

JPEG 可 以 保存 不 同 质量 级 别 的 图 片 ， 可 以 改变 图 像 包含 的 信息 和 文件 的 整体 大 小 。JPEG 
文件 使 用 的 压缩 是 有 利 的 ， 因 为 在 Photoshop 中 以 60% 的 品质 即 可 保存 一 幅 高 质量 的 图 片 。 


@ GIF 


GIF (Graphics Interchange Format) 从 1987 年 CompuServe 开始 使 用 ， 并 迅速 占领 了 几乎 所 
有 好 看 的 网 站 。 在 那个 时 代 ， 在 初级 网 页 上 仅仅 能 通过 GIF 添加 简单 循环 的 动画 。 

除了 为 用 户 展示 简单 的 动画 之 外 ，GIF 文件 提供 了 更 多 功能 。GIF 文件 在 使 用 简单 、 颜 色 很 
少 的 内 容 上 是 支持 得 非常 完美 的 ， 通 常 可 以 使 用 到 Logo 图 片 中 。 


@ PNG 


多 亏 了 GIF 文件 格式 的 不 足 ，PNG (Portable Network Graphics) 格式 诞生 了 。PNG 是 一 种 
使 用 无 损 压 缩 的 图 片 格式 ， 将 图 片上 出 现 的 颜色 进行 索引 ， 保 留 在 “ 调 色 板 ” 上 ，PNG 在 显示 
图 像 的 时 候 就 会 调用 调 色 板 的 颜色 去 填充 相应 的 位 置 。PNG 格式 的 目标 是 不 仅 要 取代 GIF 图 片 
格式 ， 还 要 成 为 互联 网 上 使 用 的 最 主要 图 片 格式 。 

JPEG 文件 通常 可 以 正常 保存 ， 也 可 以 保存 为 一 种 交错 格式 。 交 错 格式 会 稍微 复杂 一 点 ， 但 
是 在 Web 页 面 上 泻 染 时 ， 图 片 加 载 反而 会 更 快 ， 因 为 图 片 绘制 是 连续 的 。 因 为 页 面 下 载 完成 
时 ， 图 片 已 经 展示 了 ， 该 技巧 令 人 相信 页 面 加 载 更 快 ， 有 助 于 减少 页 面 重 绘 。 

使 用 PNG 格式 ， 几 乎 所 有 想 要 的 图 片 效果 都 可 以 达到 。PNG 比 GIF 更 适合 做 透明 图 片 ， 并 
且 色 彩 空间 更 宽 ， 可 以 允许 保存 与 了 PEG 图 片 相同 数量 的 颜色 。 一 旦 将 JPEG 格式 创作 的 图 案 或 
梯度 图 像 转 为 PNG 格式 ， 就 会 发 现 明 显 差异 。 这 是 因为 PNG 格式 有 精确 的 色彩 演绎 并 采用 无 
损 压 缩 算法 ，JPEG 文件 使 用 适当 颜色 的 填充 。 


民 元 选择 JPG 还 是 PNG? 


对 比 JPG 和 PNG 的 特点 ， 不 同 的 图 像 使 用 不 同 的 格式 能 得 到 最 佳 压缩 效果 。 对 于 层次 丰 
富 、 颜 色 较 多 的 图 像 ， 使 用 JPG 更 好 。 因 为 为 了 很 好 地 显示 这 种 图 像 ，PNG 将 使 用 调 色 板 
颜色 更 为 丰富 的 PNG24， 这 样 图 片 大 小 会 比 卫 G 大 。 而 对 于 颜色 简单 对 比 强烈 的 图 像 ， 则 
使 用 PNG 更 好 ， 因 为 PNG 使 用 较 少 的 调 色 板 颜色 就 可 以 满足 显示 效果 ， 而 且 得 到 的 图 片 相 
对 也 较 小 ， 而 卫 G 是 有 损 的 ， 在 清晰 的 颜色 过 渡 周 围 会 有 大 色 块 ， 影 响 显 示 效 果 。 
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® WebP 


WebP 是 一 种 最 新 的 图 像 格式 。 这 种 格式 从 VP8 视频 压缩 编 解 码 器 开始 就 有 着 深刻 的 历史 ， 
WebP 技术 最 早 是 由 On2 开发 ， 现 在 由 Google 支持 ， 是 一 种 旨 在 加 快 图 片 加载 速 度 的 图 片 格 
式 。 图 片 压缩 体积 大 约 只 有 JPEG 的 三 分 之 二 ， 并 能 节省 大 量 的 服务 器 带宽 资源 和 数据 空间 。 转 
换 和 压缩 图 片 为 WebP 格式 的 工具 请 参考 https://developers.google.com/speed/webp/。 

一 些 图片 处 理 软件 也 支持 WebP 格式 ， 例 如 Pixelmator (www.pixelmator.com/)。WebP 格式 
与 PNG 格式 类 似 ， 支 持 高 数量 级 的 颜色 ， 支 持 透明 度 。 这 也 使 得 WebP 适用 于 代替 JPEG、GIF 
和 PNG 格式 。 

了 解 图 像 格式 的 类 型 使 用 是 成 功 的 一 半 ， 另 一 半 便 是 使 用 各 种 实用 压缩 程序 。 下 面 介绍 几 种 
常用 的 图 像 压 缩 工 具 。 


@ JPEGmini 


JPEGmini (http:/www:jpegmini.com) 是 Web 服务 和 应 用 程序 ， 可 以 优化 部 分 不 易 被 人 眼 识 
别 的 JPEG 图 像 的 占用 空间 。 注 意 ， 使 用 单反 相机 或 数码 相机 拍摄 的 图 像 效 果 最 好 。 如 果 使 用 已 
经 压缩 的 图 像 ， 减 小 的 空间 将 会 小 得 多 。 这 听 起 来 有 点 牵强 附会 ， 是 使 用 JPEGmini， 就 会 发 现 
令 人 满意 的 惊喜 。 

通过 访问 网 站 wwwjpegmini.com/main/ 从 电脑 里 拖 忠 一 幅 照 片 到 浏览 器 (或 者 通过 图 片上 传 
功能 )， 随 即将 进行 图 片 处 理 ， 并 出 现 一 幅 新 图 片 ， 并 且 展 示 了 节省 多 少 空间 。 

@ PNGGauntlet 


PNGGauntlet (Chttp:/pnggauntletcom/) 是 一 个 Windows 压缩 PNG 文件 的 应 用 程序 。 

如 果 压 缩 PNG 文件 ， 我 们 可 能 听 说 过 PNGOUT、OptiPng、DeflOpt。 这 些 为 PNG 文件 优化 
的 应 用 程序 有 助 于 减少 文件 大 小 ， 同 时 保证 质量 。PNGGauntlet 处 理 文件 时 会 将 这 3 个 应 用 程序 
合 为 一 体 。 在 这 款 易 用 的 应 用 程序 中 ， 选 择 一 个 输出 文件 来， 然后 拖 忠 图 片 到 应 用 程序 中 (或 者 
通过 添加 图 片 按钮 )， 会 立即 执行 图 片 处 理 。 

有 时 会 发 现 该 程序 被 “ 卡 死 ”， 这 是 程序 在 处 理 图 片 时 执行 的 高 密度 算数 操作 导致 的 。 

@ 图 像 优化 工具 RIOT 


另 一 个 在 Windows 系统 中 可 以 使 用 的 应 用 程序 是 RIOT (Radical Image Optimization Tool)。 

RIOT (http://luci.criosweb.ro/rioV》 既 可 作为 一 个 独立 的 Windows 应 用 程序 ， 也 可 作为 其 他 
图 像 处 理 程序 的 插件 ， 例 如 GIMP (www.gimp.org/)。 这 个 应 用 程序 支持 JPEG、GIF 和 PNG 文 
件 格式 ， 并 且 支持 双 窗口 ， 便 于 比较 源 文件 ， 而 不 需要 使 用 命令 行 或 类 似 的 工具 常常 提供 的 “ 猜 
测 、 优 化 、 重 复 ” 等 方法 。 

RIOT 不 仅 包含 压缩 选项 ， 还 可 以 改变 遮光 、 色 阶 、 色 彩 以 及 一 系列 基于 图 片 格式 的 大 量 选项 。 

® ImageAlpha 


ImageAlpha (http:/pngmini.com/) 是 最 常用 的 PNG 压缩 工具 之 一 。 这 个 应 用 可 运行 在 OS X 
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系统 中 ， 并 且 是 免费 的 。ImageAlpha 采用 无 损 的 24 位 PNG 图 像 (或 任何 PNG 文件 )， 改 变 压 

















缩 损耗 和 8 位 真 彩色 。 
例如 ， 在 Adobe Photoshop 保存 时 色 选 存储 为 Web 所 用 格式 ， 并 选择 PNG-24 预 设 格式 ， 如 
图 9.10 所 示 。 
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图 9.10 选择 PNG-24 


打开 ImageAlpha， 调 整 后 在 预览 窗口 中 显示 的 效果 如 图 9.11 所 示 。 





图 9.11 使 用 ImageAlpha 预览 


保存 图 像 并 选中 通过 ImageOptim 进一步 处 理 图 像 的 复 选 枉 。 图 9.12 并 排 显示 了 压缩 前 后 图 
像 的 比较 。 
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压缩 文件 62 KB 
图 9.12 压缩 前 后 图 像 效 果 对 比 


@ ImageOptim 


ImageOptim (http://imageoptim.com/) 是 图 像 压缩 实用 程序 第 二 选择 。 仅 支持 OS X， 可 处 理 
PNG、GIF、JPEG 文件 。 

使 用 ImageOptim 处 理 图 片 就 像 打开 程序 和 拖 动 想 优化 的 图 像 一 样 容 易 。 注 意 ， 这 会 覆盖 图 
片 原件 ， 所 以 需要 创建 一 个 新 的 包含 想 压缩 图 片 的 文件 夹 ， 然 后 使 用 这 些 文件 。 正 如 前 面 所 提 到 
的 ，ImageOptim 与 ImageAlpha 配合 使 用 时 性 能 很 好 ， 甚 至 对 于 已 经 通过 JPEGmini 压缩 过 的 图 
像 仍 然 非 常 有 用 。 如 果 使 用 的 是 OS X 操作 系统 ， 那 么 ImageOptim 基本 上 是 必 选 的 工具 包 。 

@ TinyPNG 

TinyPNG (https:Wtinypng.com/) 开始 是 一 个 神奇 的 网 站 ， 工 作 方式 和 JPEG-mini 非常 类 似 。 
它 允 许 用 户 上 传 PNG 文件 ， 并 返回 提炼 和 优化 后 的 文件 。 同 时 ， 它 会 计算 上 传 的 文件 ， 改 变 颜 
色 的 位 深 ， 清 理 透 明度 。 但 结果 是 惊人 的 ， 可 以 节省 50% 到 80% 的 文件 大 小 。 


另 一 个 新 特性 是 它 提供 Adobe Photoshop 可 用 插件 。 这 个 插件 为 PNG 添加 更 广泛 的 光谱 支 
持 ， 允 许 批量 导出 所 需 文件 ， 这 些 功能 也 可 以 通过 使 用 在 线 压 缩 服务 实现 。 


9.2.4 优化 JavaScript 加 载 性 能 


随 着 越 来 越 多 的 应 用 使 用 JavaScript 技术 在 客户 端 进行 处 理 ， 从 而 使 JavaScript 在 浏览 器 中 
的 性 能 成 为 开发 者 所 面临 的 最 重要 的 问题 。 
一 个 页 面 从 开始 到 呈现 完毕 主要 需要 经 历 4 个 阶段 ， 如 图 9.13 所 示 。 
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绘制 /合成 


图 9.13 页 面 从 开始 到 呈现 


每 个 阶段 的 主要 工作 如 图 9.13 所 示 ， 而 我 们 的 优化 目标 如 图 9.14 所 示 。 





图 9.14 优化 目标 


JavaScript 性 能 优化 又 因 JavaScript 的 阻塞 特性 变 得 复杂 ， 也 就 是 说 当 浏 览 器 在 执行 
JavaScript 代码 时 ， 不 能 同时 做 其 他 事情 ， 即 其 他 事情 都 会 被 阻塞 。 无 论 当前 JavaScript 代码 是 
内 嵌 还 是 在 外 链 文 件 中 ， 页 面 的 下 载 和 泻 染 都 必须 停 下 来 等 待 脚 本 执行 完成 。JavaScript 执行 过 
程 耗 时 越久 ， 浏 览 器 等 待 响应 用 户 输入 的 时 间 就 越 长 。 本 节 将 介绍 如 何 优化 JavaScript 的 加 载 性 
能 ， 从 而 提高 其 在 浏览 器 中 的 性 能 。 

1. 无 阻塞 加 载 

减少 JavaScript 文件 大 小 并 限制 HTTP 请 求 数 在 功能 丰富 的 Web 应 用 或 大 型 网 站 上 并 不 总 是 
可 行 。Web 应 用 的 功能 越 丰 富 ， 所 需要 的 JavaScript 代码 就 越 多 ， 尽 管 下 载 单个 较 大 的 
JavaScript 文件 只 产生 一 次 HTTP 请 求 ， 却 会 锁 死 浏览 器 的 一 大 段 时 间 。 为 避免 这 种 情况 ， 需 要 
通过 一 些 特定 的 技术 向 页 面 中 逐步 加 载 JavaScript 文件 ， 这 样 做 在 某 种 程度 上 来 说 不 会 阻塞 浏览 
器 。 

无 阻塞 脚本 的 秘诀 在 于 ， 在 页 面 加 载 完成 后 才 加 载 JavaScript 代码 。 这 就 意味 着 在 window 
对 象 的 onload 事件 触发 后 再 下 载 脚本 。 有 多 种 方式 可 以 实现 这 一 效果 。 

首先 ， 将 所 有 的 <scripf> 标 签 放 到 页 面 底 部 ， 也 就 是 <body> 闭 合 标签 之 前 ， 这 能 确保 在 脚本 
执行 前 页 面 已 经 完成 泻 染 。 


【代码 9-1】 
01 <!DOCTYPE html> 
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其 次 ，<scripP> 标 签 有 一 个 扩展 属性 defer。defer 属性 指明 本 元 素 所 含 的 脚本 不 会 修改 
DOM， 因 此 代码 能 安全 地 延迟 执行 。 目 前 ，defer 属性 的 浏览 器 支持 情况 如 图 9.15 所 示 ， 可 以 参 
考 http://caniuse.com/#search=defer。 在 其 他 不 支持 defer 属性 的 浏览 器 中 ，defer 属性 会 被 直接 忽 
略 ， 因 此 <scripf> 标 签 会 以 默认 的 方式 处 理 ， 也 就 是 说 会 造成 阻塞 。 
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图 9.15 defer 浏览 器 支持 情况 


如 果 目 标 浏览 器 支持 ， 那 么 这 仍然 是 一 个 有 用 的 解决 方案 ， 例 如 : 

01 <script type="text/javascript" src="scriptl.js" defer></script> 

带 有 defer 属性 的 <scripf> 标 签 可 以 放置 在 文档 的 任何 位 置 。 对 应 的 JavaScript 文件 将 在 页 面 
解析 到 <scrip 人 > 标签 时 开始 下 载 ， 但 不 会 执行 ， 直 到 DOM 加 载 完成 ， 即 onload 事件 触发 前 才 会 
被 执行 。 当 一 个 带 有 defer 属性 的 JavaScript 文件 下 载 时 ， 它 不 会 阻塞 浏览 器 的 其 他 进程 ， 因 此 
这 类 文件 可 以 与 其 他 资源 文件 一 起 并 行 下 载 。 

此 外 ，HTML 5 为 <scripP> 标 签 定义 了 一 个 新 的 扩展 属性 : async。 它 的 作用 和 defer 一 样 ， 能 
够 异步 加 载 和 执行 脚本 ， 不 会 因为 加 载 脚本 而 阻塞 页 面 的 加 载 。 例 如 ; 
医 ET 


async 属性 规定 该 脚本 相对 于 页 面 的 其 余部 分 异步 执行 ， 一 旦 脚本 可 用 ， 就 会 异步 执行 。 但 
是 有 一 点 需要 注意 ， 在 有 async 的 情况 下 ，JavaScript 脚本 一 旦 下 载 好 了 就 会 执行 ， 所 以 很 有 可 
能 不 是 按照 原来 的 顺序 执行 的 。 如 果 JavaScript 脚本 前 后 有 依赖 性 ， 那 么 使 用 async 就 很 有 可 能 
出 现 错误 。 因 此 ， 在 使 用 过 程 中 ， 需 要 额外 小 心 。 

async 是 HTML 5 中 的 新 属性 ， 其 浏览 器 支持 情况 如 图 9.16 所 示 ， 可 以 参考 
http://caniuse.com/#search=async。 
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图 9.16 async 浏览 器 支持 情况 


2. 首 屏 加 载 优 化 、 按 需 加 载 

我 们 所 说 的 首 屏 加 载 时 间 ， 就 是 指 用 户 在 没有 滚动 时 看 到 的 内 容 泻 染 完成 并 且 可 以 交互 的 时 
间 。 至 于 加 载 时 间 ， 则 是 整个 页 面 滚动 到 底部 ， 所 有 内 容 加 载 完毕 并 可 交互 的 时 间 。 用 户 从 点 击 
按钮 开始 载 入 网 页 ， 在 他 的 感知 中 ， 什 么 状态 是 加 载 完 成 ? 首 屏 加 载 ， 即 在 可 见 的 屏幕 范围 内 ， 
内 容 展现 完全 ，loading 进度 条 消失 。 因 此 在 性 能 优化 中 ， 一 个 很 重要 的 目的 就 是 尽 可 能 提升 这 


168 


第 9 章 ”HTML 5 移动 性 能 优化 


个 “ 首 屏 加 载 ”的 时 间 ， 让 它 满足 “ 秒 出 法 则 ”。 
按 需 加 载 是 不 可 或 缺 的 优化 手段 ， 主 要 有 以 下 两 种 方式 : 一 是 懒 加载 ， 二 是 响应 式 加 载 。 
懒 加 载 能 够 在 用 户 滚动 页 面 时 自动 获取 更 多 的 数据 ， 而 新 得 到 的 数据 不 会 影响 原 有 数据 的 显 
示 ， 同 时 最 大 程度 上 减少 服务 器 端的 资源 耗 用 。 例 如 ， 页 面 结构 如 图 9.17 所 示 ， 就 完全 可 以 采 
取 懒 加 载 的 方式 。 初 次 加 载 时 仅 显 示 首 屏 页 面 内 容 ， 其 他 内 容 需要 时 再 加 载 。 在 首 屏 加 载 的 时 候 
把 首 屏 的 内 容 加 载 ， 而 位 于 首 屏 之 外 的 元 素 都 只 在 出 现在 首 屏 时 才 加 载 ， 很 大 程度 地 节省 了 流 
量 ， 减 小 了 首 屏 加 载 时间 。 





kg 





图 9.17 首 屏 加 载 优化 示意 
例如 ， 通 过 jQuery LazyLoad 插件 来 实现 图 片 懒 加 载 。 首 先 ， 需 要 引用 JavaScript 文件 : 


修改 HTML 代码 中 需要 延迟 加 载 的 图 片 img 标签 : 


将 真实 图 片 地 址 写 在 data-lazyload 属性 中 ， 而 将 其 src 属性 中 的 图 片 换 成 一 个 默认 图 片 地 
址 ， 可 以 设计 为 一 个 通用 占 位 图 。 添 加 class="J_Lazyload" 用 于 区 别 哪些 图 片 需要 延 时 加 载 ， 当 
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然 也 可 以 换 成 别 的 关键 词 ， 修 改 的 同时 记得 修改 调用 时 的 jQuery 选择 器 。 为 img 元 素 添加 width 
和 height 属性 有 助 于 在 图 片 未 加 载 时 占据 所 需要 的 空间 ， 防 止 图 片 加 载 完成 时 页 面 发 生 拌 动 。 
最 后 ， 调 用 LazyLoad: 


01 $('img.J Lazyload) .1azyload () 7 


关于 jQuery LazyLoad 插件 的 具体 实现 代码 可 参考 https://github.com/tuupola/jquery_lazyload。 

第 二 种 响应 式 加 载 方式 〈 见 图 9.18) 通过 使 用 JavaScript 或 者 媒体 查询 来 判断 分 辩 率 ， 从 而 
选择 不 同 尺 寸 的 图 片 等 对 应 资源 进行 加 载 引 入 。 好 处 显而易见 ， 同 样 可 以 加 快 加 载 速度 和 节省 流 
量 。 响 应 式 设计 是 现在 网 站 设计 的 一 个 流行 趋势 ， 随 着 移动 互联 网 的 发 展 ， 这 项 技术 也 越 来 越 受 
重视 。 通 过 这 项 技术 ， 我 们 能 够 方便 地 控制 资源 的 加 载 与 显示 ， 例 如 在 分 辨 率 不 同 的 手机 上 分 别 
使 用 不 同 的 CSS， 加 载 不 同 大 小 的 图 片 资源 。 








New York Department of 
Consumer Affairs 
Investigates connected baby 
monitor hacks 





Banner large.jpg banner_small.jpg 
图 9.18 ”响应 式 加 载 
例如 ，img 的 srcset 属性 为 使 用 不 同 分 辩 率 的 不 同 浏览 器 用 户 提供 适合 其 浏览 环境 图 片 大 小 
的 解决 方案 。 例 如 : 


01 <img src="standard.jpg" 


02 alt="an image" 

03 srcset="small 480.jpg 480w, 
04 standard 768.jpg 768w, 

05 large 1024.jpg 1024w, 

06 large@2x.jpg 2x" /> 


从 上 面 的 代码 片段 可 以 看 出 srcset 属性 使 用 一 系列 喜 号 分 隐 的 属性 值 。 起 初 觉得 有 一 点 匈 
长 ， 但 是 仔细 看 就 会 发 现 几乎 每 个 图 片 文件 名 都 以 字母 w 结尾 。 这 个 属性 值 告诉 浏览 器 图 片 的 
大 小 或 限制 。 可 srcset 该 属性 值 分 解 如 下 : 


@ 屏幕 尺寸 为 0~480px 之 间 的 显示 图 片 small 480jpg。 
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屏幕 尺寸 为 481~768px 之 间 的 显示 图 片 standard 768jpg。 
屏幕 尺寸 为 769~1024px 之 间 的 显示 图 片 large_1024jpg。 
高 像素 密度 屏幕 显示 图 片 large@2x.jpg。 

其 他 屏幕 使 用 图 片 standard .jpg。 


目前 ，srcset 属性 的 兼容 性 如 图 9.19 所 示 ， 可 以 参考 http://caniuse.com/#search=srcset。 


lossafar ” OperaMni” Androd * Chromefor 


Browser 





图 9.19 sreset 属性 兼容 性 


可 以 通过 polyfill (https://github.com/borismus/sreset-polyfill》 来 使 用 srcset 属性 ， 并 完成 兼容 
问题 。 需 要 注意 的 是 ， 按 需 加 载 虽 然 能 提升 首 屏 加 载 的 速度 ， 但 是 也 有 可 能 带 来 更 多 的 界面 重 
绘 ， 影 响 泻 染 性 能 ， 因 此 要 评估 具体 的 业务 场景 再 做 决定 。 


3. 预 加 载 

有 时 我 们 能 够 通过 用 户 的 行为 统计 预 判 出 用 户 下 一 步 可 能 进行 的 操作 。 假 设 我 们 统计 出 来 针 
对 某 个 微 应 用 ， 大 部 分 用 户 在 首页 泻 染 完成 之 后 会 点 击 列表 中 的 第 一 个 项 目 查 看 详情 。 那 么 在 首 
页 泻 染 完成 之 后 ， 我 们 就 可 以 预先 加 载 第 一 个 项 目的 部 分 内 容 ， 这 样 大 部 分 用 户 就 能 立即 看 到 新 
页 面 中 的 内 容 了 。 

页 面 资 源 预 加 载 (Link prefetch) 是 浏览 器 提供 的 一 个 技巧 ， 目 的 是 让 浏览 器 在 空闲 时 间 下 
载 或 预 读 取 一 些 用 户 在 将 来 将 会 访问 的 文档 资源 。 一 个 Web 页 面 可 以 对 浏览 器 设置 一 系列 的 预 
加 载 指示 ， 当 浏览 器 加 载 完 当 前 页 面 后 ， 就 会 在 后 台 静 悄悄 地 加 载 指定 的 文档 ， 并 把 它们 存储 在 
缓存 里 。 当 用 户 访问 到 这 些 预 加 载 的 文档 后 ， 浏 览 器 能 快速 地 从 缓存 里 提取 给 用 户 。 例 如 : 





HTML 5 页 面 资源 预 加 载 / 预 读 取 (Link prefetch) 功能 是 通过 Link 标记 实现 的 ， 将 rel 属性 
指定 为 “prefetch”， 在 href 属性 里 指定 要 加 载 资源 的 地 址 。 

在 页 面 中 需要 加 载 哪些 资源 、 何 时 加 载 ， 通 常 要 根据 具体 页 面 的 需求 情况 进行 具体 考虑 。 下 
面 是 一 些 建议 : 

@ 。 当 页 面 有 幻灯 片 类 似 的 服务 时 ， 预 加 载 / 预 读 取 接 下 来 的 1~3 页 和 之 前 的 1~3 页 。 
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@ 。 预 加 载 那 些 整个 网 站 通用 的 图 片 。 
@ 。 预 加 载 网 站 上 搜索 结果 的 下 一 页 。 


与 Link prefetch 对 应 的 另 一 种 是 DNS 与 解析 技术 (DNS Prefetch)。 当 用 户 浏览 网 页 时 ， 浏 
览 器 会 在 加 载 网 页 时 对 网 页 中 的 域名 进行 解析 缓存 ， 这 样 在 用 户 点 击 当 前 网 页 中 的 连接 时 就 无 须 
再 次 进行 DNS 的 解析 ， 减 少 用 户 等 待 时 间 ， 提 高 用 户 体验 。 通 过 DNS Prefetch 可 以 提高 访问 的 
流畅 性 。 

如 果 要 浏览 器 端 对 特定 的 域名 进行 解析 ， 可 以 通过 以 下 两 种 方式 实现 。 第 一 种 方式 是 通过 
link 标签 实现 ， 例 如 : 


Ol <link rels"dnspretetoh" hrets" //apitwitter.conm | 
第 二 种 方式 是 通过 meta 标签 实现 ， 例 如 ， 
Es 


设置 DNS 与 解析 的 代码 应 当 尽量 写 在 网 页 的 前 部 ， 起 到 减少 DNS 请 求 的 功能 。 目 前 ， 
DNS Prefetch 的 浏览 器 支持 情况 如 图 9.20 所 示 。 


* Androld * Chromefor 
Browser Android 





图 9.20 DNS Prefetch 的 浏览 器 支持 情况 


当然 ， 预 加 载 方式 也 并 不 是 在 所 有 场景 下 都 使 用 。 一 方面 ， 需 要 做 好 充分 的 用 户 调研 ， 掌 握 
用 户 的 使 用 习惯 ; 另 一 方面 ， 对 于 小 部 分 用 户 而 言 ， 预 加 载 所 带 来 的 就 是 不 必要 的 流量 消耗 。 


4. 异步 加 载 第 三 方 资源 


第 三 方 资源 有 的 时 候 不 可 控 ， 比 如 说 页 面 统计 、 地 图 显示 、 分 享 组 件 等 ， 这 些 第 三 方 资源 使 
用 的 时 候 要 慎重 选择 ， 充 分 考察 它们 对 于 性 能 的 影响 。 为 了 避免 第 三 方 资源 在 页 面 加 载 时 成 为 问 
题 ， 甚 至 有 可 能 更 严重 地 阻塞 全 部 页 面 的 加 载 ， 应 该 使 用 异步 的 方式 加 载 第 三 方 资源 ， 防 止 第 三 
方 资源 的 使 用 影响 到 页 面 本 身 的 功能 。 例 如 ， 异 步 加 载 第 三 方 JavaScript 资源 : 





在 加 载 时 间 较 长 的 时 候 ， 务 必要 让 用 户 明确 感知 到 加 载 完成 的 提示 ， 通 常 是 在 加 载 过 程 中 显 


dz2 
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示 Loading 的 进度 条 ， 加 载 完成 的 时 候 隐 藏 它 。 从 心理 上 ， 这 会 让 用 户 有 一 种 “期 盼 感 ”， 而 不 
至 于 太 过 枯燥 。 对 于 一 些 重量 级 的 移动 应 用 ， 例 如 游戏 ， 开 始 前 需要 加 载 很 多 资源 才能 让 后 面 的 
游戏 过 程 更 为 流畅 ， 一 个 带 百分比 进度 显示 的 进度 条 就 更 加 重要 了 。 





9.2.5 ”其 他 加 载 优化 
除了 前 几 小 节 介 绍 的 加 载 优 化 之 外 ， 还 有 Cookie 和 重 定向 优化 。 
1. 优化 Cookie 


众所周知 ，HTTP 是 一 个 无 状态 协议 ， 所 以 客户 端 每 次 发 出 请 求 时 ， 下 一 次 请 求 无 法 得 知 上 
-次 请 求 所 包含 的 状态 数据 ， 如 何 能 把 一 个 用 户 的 状态 数据 关联 起 来 呢 ? Cookie 是 解决 这 个 问 
题 的 方法 之 一 。 在 服务 器 与 浏览 器 之 间 Cookie 的 处 理 与 传递 如 图 9.21 所 示 。 





服务 器 浏览 器 济 作 器 
浏览 器 将 Cookie 保存 Cookie 
发 回 最 务 器 


图 9.21 Cookie 处 理 过 程 示意 图 


Cookie 核心 对 象 是 key-value， 除 此 之 外 还 有 max-age、path、domain 和 httponly 属性 。 
httponly 属性 标识 一 个 客户 端 JavaScript 能 否 直接 操作 该 Cookie; max-age 表示 缓存 时 间 ， 单 位 
为 秒 ， domain 代表 域名 ， 例 如 设置 为 .myblog.com， 则 imyblogs.com 也 可 以 访问 该 Cookie， 如 
果 设 置 为 icnblogs.com， 则 image.cnblogs.com 这 个 域名 下 的 资源 将 不 能 访问 这 个 Cookie; path 
代表 文件 路 径 ， 默 认为 /， 表 示 该 domain 下 的 所 有 资源 都 可 以 访问 这 个 Cookie。 浏 览 器 对 单个 
Cookie 大 小 限制 不 超过 4KB; 对 于 同一 域名 下 Cookie 的 数量 也 有 限制 ， 一 般 不 允许 超过 
50 不 ， 

假如 Http 请 求 响应 头 部 Set-Cookie 的 时 候 没 有 给 Cookie 添加 一 个 过 期 时 间 ， 则 它 的 默认 过 
期 时 间 为 当前 浏览 会 话 结束 ， 即 退出 浏览 器 这 个 Cookie 就 无 效 了 ， 这 个 Cookie 就 叫 作 非 持久 
Cookie， 因 为 是 存储 在 浏览 器 进程 的 内 存 中 的 。 如 果 给 Cookie 添加 了 一 个 过 期 时 间 ， 则 Cookie 
信息 将 存储 到 硬盘 上 ， 即 使 浏览 器 退出 这 个 Cookie 还 是 存在 的 。 只 要 Cookie 未 被 清除 且 还 在 过 
期 时 间 以 内 ， 这 个 Cookie 就 会 在 访问 对 应 域名 的 时 候 发 送 给 服务 器 。 

从 图 9.21 中 可 以 看 出 ，Cookie 在 访问 对 应 域名 下 的 资源 的 时 候 都 会 通过 HTTP 请 求 发 送 到 
服务 器 ， 所 以 通过 合理 地 设计 Cookie、 减 少 Cookie 的 体积 ， 能 够 减少 HTTP 请 求 报 文 的 大 小 、 
提高 响应 速度 。 例 如 ， 静 态 资源 域名 不 使 用 Cookie。 

Cookie 在 访问 对 应 域名 下 的 资源 时 都 会 通过 HTTP 请 求 发 送 到 服务 器 ， 但 是 在 访问 一 些 资 
源 (例如 JavaScript 脚本 、CSS 和 图 片 ) 的 时 候 ， 大 多 数 情况 下 这 些 Cookie 是 多 余 的 ， 所 以 我 
们 可 以 通过 使 用 不 同 的 主机 来 存储 一 些 静态 资源 ， 例 如 用 专门 的 主机 来 存储 图 片 ， 这 样 访问 这 些 
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资源 的 时 候 就 不 会 发 送 多 余 的 Cookie， 从 而 提高 响应 速度 。 

例如 ， 访 问 阿里 旅行 无 线 首页 https://h5.m.taobao.comy/trip/lhome/index.html， 通 过 图 9.22 的 
network 资源 列表 可 以 看 出 ， 图 片 均 使 用 gw.alicdn.com 域名 ， 而 JavaScript 资源 使 用 g.alicdn.com 
域名 ，ajax 请 求 使 用 api.m.taobao.com 域名 。 如 此 ， 针 对 不 同 静 态 资源 的 类 型 ， 分 别 使 用 不 同 的 
域名 ， 这 样 访问 这 些 资源 的 时 候 就 不 会 发 送 多 余 的 Cookie。 


[Finer Hide data URLs GW xHr Js css Img Media 
Name Memod Sa yoe Been 

国 oan ee oo Ger oR webp 54ke 
| 
站 到 
司 ia BR seript 25.3K8 
国 ee oe 3 
oes oo 


图 9.22 静态 资源 单独 使 用 域名 


2. 避免 重 定向 
重 定向 是 用 于 将 用 户 从 一 个 URL 重新 路 由 到 另 一 个 URL。 常 用 重 定向 的 类 型 有 : 


@ ”301: 永久 重 定向 ， 这 个 状态 码 标识 用 户 所 请 求 的 资源 被 移动 到 了 另外 的 位 置 ， 客 户 端 
收 到 此 响应 后 ， 需 要 发 起 另外 一 个 请 求 去 下 载 所 需 的 资源 。 

@ 302: 临时 重 定向 ， 这 个 状态 码 标识 用 户 所 请 求 的 资源 被 找到 了 ， 但 不 在 原始 位 置 ， 服 
务 器 会 回复 其 他 的 一 个 地 址 ， 客 户 端 收 到 此 响应 后 ， 也 需要 发 起 另外 一 个 请 求 去 下 载 
所 需 的 资源 。 

@ 304: Not Modified， 主 要 用 于 当 浏 览 器 在 其 缓存 中 保留 了 组 件 的 一 个 副本 ， 同 时 组 件 
已 经 过 期 了 ， 这 时 浏览 器 就 会 生成 一 个 条 件 GET 请 求 ， 如 果 服 务 器 的 组 件 并 没有 修改 
过 ， 则 会 返回 304 状态 码 ， 同 时 不 携带 主体 ， 告 知 浏览 器 可 以 重用 这 个 副本 ， 减 少 响 


应 大 小 。 

例如 ， 在 浏览 器 中 访问 cnblogs.com， 同 时 打开 控制 台 ， 查 看 network 情况 ， 如 图 9.23 所 示 。 
[Fner Hide data URLs ET XHr J5 css Img Media Font Doc Ws other 
ne Method Status Type He Timeline - Start Time el ct 
[a Ge 30 extpheml 1918 = 
国 当 “ee Er 200 gocument 19ra di | 
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nogs comserpt | 吕 |oR om 918kB mm | 


9.23 重 定向 网 络 示意 图 
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从 图 9.23 中 可 以 看 出 ， 第 一 条 cnblogs.com 的 请 求 状态 是 301， 而 后 第 二 条 请 求 
www.cnblogs.com 的 请 求 状 态 才 是 200。 这 里 发 生 了 301 重 定向 。 

那么 ， 重 定向 是 如 何 损伤 页 面 性 能 的 呢 ? 图 9.24 展示 了 正常 的 请 求 与 域名 重 定向 请 求 所 经 
历 步骤 的 区 别 。 





: WS : 


后 


| Er 


发 送 请 求 


正常 的 域名 请 求 本 


域名 重 定向 请 求 


图 9.24 重 定向 对 性 能 的 损耗 
当 页 面 发 生 了 重 定 向 ， 就 会 延迟 整个 HTML 文档 的 传输 。 在 HTML 文档 到 达 之 前 ， 页 面 中 
会 呈现 任何 东西 ， 也 没有 任何 组 件 会 被 下 载 。 为 了 实现 更 好 的 效率 ， 资 源 请 求 重 定向 也 应 该 尽 
ea 减少 一 次 重 定向 ， 减 少 一 个 请 求 数 。 例 如 ， 在 定义 链接 地 址 的 href 属性 的 时 候 ， 尽 量 
使 用 最 完整 、 直 接 的 地 址 ， 例 如 : 


01 <a href="//www.tacbao.com" alt=" 淘 宝 "> 返回 首页 </a> 





四. 了 css 优化 


CSS 代码 优化 的 目的 并 不 仅仅 是 减少 CSS 文件 的 大 小 ， 还 能 让 CSS 代码 更 有 条 理 、 更 高 
效 。 编 写 好 的 CSS 代码 ， 有 助 于 提升 页 面 的 泻 染 速度 。 实 际 上 ， 浏 览 器 泻 染 引擎 需要 解析 的 
CSS 规则 越 少 ， 性 能 越 好 。 本 节 主 要 从 以 下 几 方 面 介绍 CSS 优化 : 

@ 了解 页 面 的 泻 染 过 程 。 

@ ”避免 在 HTML 标签 中 写 Style 属性 。 

@ 正确 使 用 display 的 属性 。 
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避免 使 用 CSS 表达 式 。 
请 勿 滥用 float 属性 。 

不 滥用 Web 字体 。 

不 声明 过 多 的 Font-size。 
优化 选择 器 的 使 用 。 


9.3.1 了 解 页 面 的 泻 染 过 程 


泻 染 也 就 是 将 页 面 内 容 显示 到 浏览 器 屏幕 上 。 浏 览 器 的 泻 染 引 擎 是 一 种 对 HTML 文档 进行 
解析 并 将 其 显示 在 页 面 上 的 工具 。 目 前 ，Chrome、Safari、Opera 浏览 器 中 使 用 WebKit 引擎 ， 而 
Firefox 浏览 器 中 使 用 Gecko 引擎 ，IE 浏览 器 中 使 用 Trident 引擎 。2013 年 4 月 3 日 ，Google 宣 
布 在 Chrome 浏览 器 中 使 用 新 型 开源 泻 染 引擎 Blink。Opera 的 Bruce Lawson 也 在 官方 博客 中 表 
示 计 划 改 用 Blink 引擎 。Mozilla 也 在 Github 中 公布 与 韩国 三 星 共 同 开发 的 Android 系统 与 ARM 
系统 用 泻 染 引擎 Servo。 虽 然 各 泻 染 引擎 之 间 肯 定 存 在 着 区 别 ， 但 是 当 用 户 在 地 址 栏 中 输入 URL 
地 址 、 开 始 加 载 页 面 时 ， 各 泻 染 引擎 都 开始 实现 如 图 9.25 所 示 的 泻 染 处 理 。 


解析 HTML 
构建 DOM 树 
ee 


构建 DOM 树 
9.25 泻 染 引擎 的 基本 工作 流程 


首先 ， 泻 染 引 擎 会 解析 HTML 文档 ， 并 将 标签 转换 成 内 容 树 中 的 DOM 节点 ， 构 建 DOM 
树 。 同 时 ， 它 会 解析 页 面 中 的 style 元 素 和 外 部 CSS 文件 中 的 样式 数据 ， 根 据 所 构建 的 DOM 树 
和 解析 的 样式 数据 共同 创建 泻 染 树 。 

当 演 染 树 被 构建 完成 后 ， 开 始 布局 处 理 过 程 。 布 局 的 过 程 就 是 根据 泻 染 树种 的 位 置信 息 确定 
每 个 节点 在 屏幕 中 的 显示 位 置 。 当 窗口 尺寸 被 修改 〈resize )、 发 生 滚动 操作 ， 或 position、 
display、width、height 等 与 元 素 位 置 相关 的 样式 属性 值 被 更 新 时 触发 布局 过 程 。 在 布局 过 程 中 由 
于 要 计算 所 有 元 素 的 位 置信 息 ， 更 加 会 降低 页 面 加 载 性 能 。 在 WebKit 引擎 中 把 布局 过 程 称 为 
Layout 过 程 ， 在 Gecko 引擎 中 把 绘制 过 程 称 为 Reflow 过 程 。 浏 览 器 将 在 页 面 信息 发 生 改变 时 把 
对 页 面 性 能 的 影响 度 降 为 最 低 。 布 局 这 一 过 程 是 一 个 逐步 完成 的 过 程 ， 为 了 获得 更 好 的 用 户 体 
验 ， 泻 染 引擎 会 尝试 尽快 把 内 容 显示 出 来 ， 而 不 会 等 到 所 有 HTML 文档 都 被 解析 完成 后 才 创建 
并 布局 泻 染 树 。 

最 后 开始 绘制 的 过 程 ， 即 将 泻 染 树 中 的 可 视 化 信息 在 屏幕 中 绘制 显示 出 来 。 当 color、 
background-color、visibility 、outline 等 与 视觉 相关 的 样式 属性 值 被 更 新 时 触发 绘制 过 程 。 在 绘制 
过 程 中 由 于 要 重 计算 元 素 的 视觉 信息 ， 因 此 会 降低 页 面 加 载 性 能 。 在 WebKit 引擎 中 把 绘制 过 程 
称 为 Painting 过 程 ， 在 Gecko 引擎 中 把 绘制 过 程 称 为 Repaint 过 程 。 

HTML 元 素 是 首先 被 解析 到 DOM 树 和 泻 染 树 中 的 ， 通 过 减少 HTML 元 素 的 数量 ， 可 以 让 
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浏览 器 更 快 地 显示 完 节点 。 因 此 ， 尽 可 能 低地 减少 HTML 中 元 素 的 数量 ， 使 用 最 少量 必需 的 
HTML 对 布局 进行 语义 化 。 

浏览 器 会 在 所 有 HTML 文档 被 解析 完毕 之 前 先 开始 执行 布局 处 理 与 绘制 处 理 ， 在 读 入 新 的 
页 面 信息 时 ， 再 次 构建 泻 染 树 并 开始 泻 染 处 理 与 绘制 处 理 。 因 此 ， 在 加 载 过 程 中 ， 在 页 面 还 未 加 
载 完毕 就 已 经 开始 实现 布局 处 理 、 泻 染 处理 ， 即 一 系列 样式 信息 的 更 新 ， 由 JavaScript 脚本 代码 
所 触发 的 动态 处 理 以 及 由 用 户 操作 所 触发 的 处 理 等 。 这 些 处 理 都 对 页 面 加 载 速度 产生 较 大 影响 。 

例如 ， 通 过 设置 元 素 的 visibility 样式 属性 值 为 hidden 来 隐藏 元 素 时 将 触发 绘制 过 程 ， 但 是 
通过 把 元 素 的 display 样式 属性 值 设置 为 none 来 隐藏 元 素 时 ， 将 同时 触发 布局 过 程 与 绘制 过 程 。 
也 就 是 说 由 于 display 样式 属性 值 与 元 素 位 置信 息 相 关 ， 所 以 对 页 面 性 能 产生 较 大 影响 。 

使 得 布局 过 程 或 绘制 过 程 消耗 较 多 资源 成 本 的 样式 属性 有 : 


@font-face 
animation 
transition 
box-shadow 
border-radius 
gradient 

opacity 
background-size 
text-align 


引起 布局 过 程 与 绘制 过 程 的 原因 有 : 

元 素 的 追加 、 修 改 与 删除 。 

使 用 动画 。 

修改 样式 。 

修改 元 素 的 class 属性 值 。 

hover 伪 类 选择 器 所 触发 的 元 素 状态 改变 。 

由 用 户 在 input 元 素 中 的 输入 而 引起 的 文字 节点 改变 。 
使 用 offsetWidth 、offsetHeight 或 getComputedStyle 取得 样式 属性 值 。 
文字 字体 的 改变 。 

窗口 尺寸 的 改变 (resize ) 。 

元 素 透明 度 的 改变 。 

页 面 或 元 素 内 的 滚动 。 


根据 泻 染 引擎 的 不 同 ， 页 面 信息 发 生 改 变 时 所 触发 的 过 程 也 会 有 所 区 别 。 在 部 分 WebKit 引 
擎 中 不 触发 布局 过 程 ， 只 触发 绘制 过 程 。 在 部 分 泻 染 引擎 中 更 容易 触发 布局 过 程 ， 页 面 上 发 生 任 
何 信息 改变 都 会 对 页 面 性 能 产生 较 大 影响 。 页 面 加 载 时 需要 耗费 一 些 时 间 ， 在 这 个 过 程 中 所 触发 
的 动画 操作 或 页 面 缩放 操作 都 会 引起 布局 过 程 或 绘制 过 程 ， 从 而 影响 页 面 加 载 性 能 。 
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在 移动 端 中 ， 用 户 对 页 面 上 的 操作 更 加 频繁 ， 所 以 减少 布局 过 程 或 绘制 过 程 的 触发 次 数 尤为 
重要 。 由 于 窗口 尺寸 的 改变 ， 页 面 滚动 或 缩放 都 会 引起 布局 过 程 或 绘制 过 程 ， 因 此 虽然 不 可 能 完 
全 避免 这 些 操作 ， 但 是 可 以 通过 减少 布局 过 程 或 绘制 过 程 的 触发 次 数 来 降低 其 对 页 面 性 能 产生 的 
影响 ， 从 而 提高 页 面 性 能 。 


9.3.2 ”避免 在 HTML 标签 中 写 Style 属性 


CSS (Cascading Style Sheets ) 即 级 联 样式 表 。 在 实际 应 用 中 可 以 通过 以 下 3 种 方式 在 
HTML 页 面 中 引入 CSS 代码 。 


(1) 内 联 式 
内 联 式 是 在 HTML 标签 的 style 属性 中 定义 样式 代码 ， 即 把 代码 直接 添加 于 所 修饰 的 标记 元 
素 。 示 例 代码 如 下 : 


这 样 做 虽然 更 为 直观 ， 但 很 大 程度 上 加 大 了 HTML 页 面体 积 ， 不 符合 结构 与 表现 分 离 的 设 
计 思 想 。 


(2) 嵌入 式 
在 页 面 中 使 用 <style> 标 签 将 样式 定义 为 内 部 块 对 象 。 示 例 代码 如 下 : 


内 联 CSS 可 以 有 效 减少 HTTP 请 求 ， 提 升 页 面 性 能 ， 缓 解 服务 器 压力 。 由 于 浏览 器 加 载 完 
CSS 才能 泻 染 页 面 ， 因 此 能 防止 CSS 文件 无 法 读 取 而 造成 页 面 毫 无 样式 的 现象 。 


(3) 引用 外 部 文件 
外 联 式样 式 表 中 ，CSS 代码 作为 文件 单独 存放 ， 例 如 使 用 style.css 文件 存放 所 有 样式 。 在 
HTML 中 的 使 用 <link> 标 签 ， 定 义 <link> 标 签 的 href 属性 来 引用 CSS 文件 。 示 例 代码 如 下 : 


虽然 内 联 式 和 绕 入 式 减 少 了 HTTP 请 求 数 ， 但 是 实际 上 却 增加 了 _ HTML 文档 的 体积 。 不 
过 ， 当 页 面 中 的 CSS 或 者 JavaScript 代码 足够 少 ， 反 而 是 开启 一 个 HTTP 请 求 的 花费 要 更 大 时 ， 
采用 这 两 种 方式 却 是 有 用 的 。 因 此 ， 需 要 在 实际 的 项 目 中 测试 评估 这 种 方式 是 否 真 的 提升 了 速 
度 。 同 时 也 要 考虑 到 该 页 面 的 目标 和 它 的 受众 : 如 果 所 期 望 用 户 只 会 访问 该 页 面 一 次 ， 例 如 对 一 
些 临 时 活动 来 说 决 不 会 期 望 有 回访 客 出 现 ， 那 么 使 用 内 联 式 /嵌入 式 代码 能 够 帮助 减少 HTTP 请 
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求 数 。 但 是 通常 情况 下 ， 由 于 在 HTML 标签 中 直接 使 用 style 属性 将 增 大 HTML 文档 的 体积 ， 
并 且 HTML 文档 下 载 完成 后 ， 行 内 样式 会 触发 一 次 额外 的 回流 事件 ， 影 响 页 面 性 能 ， 而 且 不 利 
于 后 期 维护 ， 因 此 不 建议 采用 该 方法 来 实现 样式 。 


9.3.3 ”正确 使 用 display 属性 
通过 使 用 display 属性 可 定义 建立 布局 时 元 素 生成 的 显示 框 类 型 。 例 如 ， 把 元 素 显示 为 内 联 


元 素 : 


又 例如 把 元 素 显 示 为 块 级 元 素 : 


在 9.3.1 小 节 中 介绍 了 泻 染 引擎 工作 的 基本 流程 ， 并 介绍 了 display 样式 属性 值 与 元 素 位 置信 
息 相 关 ， 会 同时 触发 布局 过 程 与 绘制 过 程 而 影响 页 面 的 泻 染 ， 记 以 对 页 面 性 能 产生 较 大 影响 ， 需 
合理 使 用 。 下 面 列 出 了 几 个 关于 display 属性 设置 的 约束 : 


@ 设置 display:inline 后 ， 不 再 使 用 width、height、margin、padding 以 及 float 等 属性 。 
@ 设置 display:inline-block 后 ， 不 再 使 用 float 属性 。 

@ ”使 用 display:block 后 ， 不 再 使 用 vertical-align 属性 。 

@ ”使 用 display:table-* 后 ， 不 再 使 用 margin 或 float 属性 。 


9.3.4 ”避免 使 用 CSS 表达 式 


CSS 表达 式 是 动态 设置 CSS 属性 的 强大 方法 ， 但 该 方法 也 非常 危险 。Internet Explorer 从 第 
5 个 版 本 开始 支持 CSS 表达 式 。 在 下 面 的 例子 中 ， 使 用 CSS 表达 式 可 以 实现 隔 一 个 小 时 切换 一 
次 背景 颜色 : 


如 上 面 的 代码 所 示 ，expression 中 使 用 了 JavaScript 表达 式 。CSS 属性 根据 JavaScript 表达 式 
的 计算 结果 来 设置 。expression 方法 在 其 他 浏览 器 中 不 起 作用 ， 因 此 在 跨 浏览 器 的 设计 中 单独 针 
对 Intemet Explorer 设置 时 会 比较 有 用 。 

表达 式 的 问题 就 在 于 它 的 计算 频率 要 比 我 们 想象 得 多 。 不 仅仅 是 在 页 面 显示 和 缩放 时 ， 就 是 
在 页 面 滚动 乃至 移动 鼠标 时 都 会 要 重新 计算 一 次 。 给 CSS 表达 式 增加 一 个 计数 器 可 以 跟踪 表达 
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式 的 计算 频率 。 在 页 面 中 随便 移动 鼠标 都 可 以 轻松 达到 10000 次 以 上 的 计算 量 。 一 个 减少 CSS 
表达 式 计算 次 数 的 方法 就 是 使 用 一 次 性 的 表达 式 ， 它 在 第 一 次 运行 时 将 结果 赋 给 指定 的 样式 属 
性 ， 并 用 这 个 属性 来 代替 CSS 表达 式 。 如 果 样 式 属性 必须 在 页 面 周期 内 动态 改变 ， 使 用 事件 句 
柄 来 代 蔡 CSS 表达 式 是 一 个 可 行 办 法 。 如 果 必 须 使 用 CSS 表达 式 ， 一 定 要 记 住 它们 要 计算 成 千 
上 万 次 并 且 可 能 会 对 页 面 的 性 能 产生 影响 。 

此 外 ，CSS 表达 式 的 执行 需 跳出 CSS 树 的 泻 染 ， 因 此 请 避免 CSS 表达 式 。 


9.3.5 ”请 勿 滥用 float 属性 


通过 定义 元 素 的 float 属性 ， 可 以 定义 元 素 在 哪个 方向 上 浮动 。 例 如 ， 实 现 文字 环绕 在 图 像 
周围 的 效果 ， 常 常 对 图 像 使 用 浮动 ， 使 文本 围绕 在 图 像 周 围 。 


【代码 9-2】 
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通过 对 img 元 素 设置 浮动 ， 实 现 文字 环绕 的 效果 ， 如 图 9.26 所 示 。 


浊 六 尖 不 沼 的 ' 和 、 避 人 次 区 元 六 在 


I 
和 
在 才 的 "各 导 作 \ 习 亲信 1 





方向 上 . -4 

float) 可 以 定义 元 
2 
和 人 二 妈 革 当场 六 究 冯 下 沸 
于 雪人 久生 Ee ed en 涡 人 7 光 起 
更 东风 直 人 可 以 


女 元 业 在 | 
知人 妆 天 中 办 在 汪 当 动 。 


9.26 文字 环绕 


不 过 在 CSS 中 ， 任 何 元 素 都 可 以 浮动 。 浮 动 元 素 会 生成 一 个 块 级 框 ， 而 不 论 它 本 身 是 何 种 
元 素 。 所 以 ， 我 们 发 现 越 来 越 多 场景 里 的 元 素 使 用 了 float 属性 ， 例 如 分 栏 布局 、 列 表 排列 等 。 
而 float 属性 在 泻 染 时 会 造成 “高 度 塌陷 ”， 例 如 





同时 ， 仍 然 设 置 img 元 素 为 浮动 : 





通过 控制 台 审查 元 素 ， 我 们 发 现 ，imsg 的 父 元 素 p 的 高 度 为 0， 如 图 9.27 所 示 。 




















图 927 高 度 塌陷 
解决 高 度 塌陷 问题 的 常用 方法 就 是 清除 浮动 。 常 用 的 清除 浮动 方法 如 下 : 
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清除 浮动 均 会 造成 泻 染 时 的 重 绘 过程 ， 影 响 性 能 。 因 此 ， 慎 用 元 素 的 float 属性 。 


9.3.6 不 滥用 Web 字体 


通过 @font-face， 可 以 在 页 面 上 使 用 所 希望 显示 的 任意 字体 。 在 @font-face 的 规则 定义 中 ， 
首先 定义 字体 的 名 称 〈 例 如 colourFont)， 然 后 指定 该 字体 的 文件 路 径 。 在 需要 使 用 该 字体 的 
HTML 元 素 的 样式 表 中 ， 通 过 font-family 属性 来 引用 字体 的 名 称 〈 即 如 前 定义 的 colourFont)。 


【代码 9-3】 





从 代码 第 3~4 行 可 以 看 出 ，sre 属性 分 别 引用 了 不 同类 型 的 字体 文件 。 不 同 字体 文件 类 型 的 
浏览 器 支持 情况 如 图 9.28 所 示 。 
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TTF/OTF 4.0 9.0* 5 1 10.0 
WOFF 5.0 9.0 3.6 5.1 11.1 

WOFF2 36.0 不 支持 35.0* 不 支持 26.0 
svG 4.0 不 支持 不 支持 3.2 9.0 
EOT 不 支持 6.0 不 支持 不 支持 不 支持 


图 9.28 不 同 字体 文件 类 型 的 浏览 器 支持 情况 
@font-face 的 浏览 器 支持 情况 如 图 9.29 所 示 ， 可 以 参考 http://caniuse.cony#search=font-face。 


Androld * Chromefor 
Browser Androld 





Edge * ~ Firefox Chrome Safarl Opera iOS Safari ” Opera Mini ~ 


EE HS 
图 9.29 ”@font-face 各 浏览 器 支持 情况 


那么 @font-face 对 页 面 的 性 能 有 什么 影响 呢 ? 首先 ，Web 字体 文件 需要 下 载 ， 下 载 完 成 后 需 
要 经 历 解析 的 过 程 ， 并 重 绘 当前 页 面 。 


©@OlTF Vewss Capture sprofle TMemory 加 Paint @ Screenshots 

[Fitter Al 固 目 Loadine @ scripting @ Rendering @ painting 

| 1000ms 2000ms 3000ms 4000ms 5000ms 6o00ms 7(ms soooms 9%oooms 1 
' 


| | 60 


i 














RECORDS | 3.535 
Update Layer Tree er 
hist 这 些 字体 使 用 了 @font-face 定 
m Update Layer Tree 义 的 eelorFont 类 型 字体 。 

一 这 些 字体 使 用 了 @font-face 定 

Summary Call Tree Bottom-Up 义 的 colorFont 类 型 字体 。 

Range 6.54 5 -6.71 5 

Aggregated Time 


170.54 ms 

3.12 ms Loading 
0.07 ms Scripting 
国 3.49 ms Rendering 


0.25 ms Painting 
2.93 ms Other 
166.68 ms Idle 











图 930”@font-face 引起 重 绘 
建议 除非 该 字体 对 页 面 是 非常 重要 、 必 不 可 少 的 ， 否 则 不 要 使 用 @font-face。 同 时 ， 在 移动 
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端 还 建议 将 字体 文件 转换 成 base64 格式 ， 可 以 有 效 地 减少 http 请 求 ， 例 如 : 





9.3.7 不 声明 过 多 的 Font-size 
通过 font-size 属性 可 设置 字体 的 尺寸 ， 例 如 : 





一 个 元 素 的 font-size 属性 会 自动 继承 父 节点 元 素 的 font-size 属性 值 ， 例 如 : 





图 9.31 字体 大 小 的 继承 


不 希望 子 元 素 继承 父 元 素 的 字体 大 小 时 ， 可 以 重新 设置 子 元 素 的 字体 大 小 ， 但 font-size 属性 
会 引起 浏览 器 重新 计算 布局 位 置 与 大 小 。 为 了 避免 浏览 器 过 分 重 排 (reflow)， 要 避免 声明 过 多 
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的 font-size 属性 。 


9.3.8 优化 选择 器 的 使 用 


选择 器 是 CSS 的 核心 ， 从 最 初 的 元 素 选择 器 、 类 /ID 选择 器 ， 逐 步 演 进 到 伪 元 素 、 伪 类 。 三 
种 基本 的 选择 器 类 型 有 : 


@ ”标签 名 选择 器 ， 如 p{}， 即 直接 使 用 HTML 标签 作为 选择 器 。 
@ ”类 选择 器 ， 如 .content{}。 
@ ”ID 选择 器 ， 如 #header{}。 


其 中 ID 选择 器 与 类 选择 器 有 很 大 的 不 同 。 同 一 个 页 面 内 不 能 出 现 相同 的 ID， 应 该 尽量 少 地 
使 用 ID 选择 器 ， 避 免 ID 名 冲突 ， 同 时 使 用 时 ， 需 要 注意 命名 空间 的 规范 。 
扩展 的 选择 器 类 型 有 : 


@ ”后代 选择 器 ， 例 如 .polaris span img{}。 后 代 选 择 器 实际 上 是 使 用 多 个 选择 器 加 上 中 间 的 
空格 来 定位 到 具体 的 、 需 要 控制 的 标签 。 

@ 群 组 选择 器 ， 如 div,span,img{}。 群 组 选择 器 实际 上 是 对 CSS 的 一 种 简化 写法 ， 通 过 过 
号 分 隔 ， 将 需要 定义 相同 样式 的 不 同 选择 器 放 在 一 起 ， 可 以 节省 非常 多 的 代码 量 。 


那么 选择 器 的 优先 级 是 如 何 确 定 的 呢 ? 一 般 而 言 ， 选 择 器 越 特殊 ， 优 先 级 就 越 高 。 也 就 是 说 
-个 选择 器 的 指向 性 越 准确 ， 优 先 级 也 就 会 越 高 。 通 常 使 用 1 表示 标签 名 选择 器 的 优先 级 ， 用 
10 表示 类 选择 器 的 优先 级 ， 用 100 表示 ID 选择 器 的 优先 级 。 从 表 9-2 中 可 以 看 出 各 选择 器 优先 
级 的 计算 方法 。 
表 9-2 举例 说 明 选 择 器 优先 级 
de ID 选择 器 (100) 类 选择 器 (10) 标签 选择 器 (1) ” ”优先 级 计算 
[ol 
[oo lo on | 
| 


了 解 了 选择 器 的 优先 级 计算 方法 能 够 在 设计 页 面 的 过 程 中 使 用 最 合理 的 优先 级 选择 器 ， 精 准 
地 定位 到 元 素 ， 便 于 对 元 素 的 样式 进行 定义 。 

那么 ，CSS 选择 器 是 如 何 影 响 浏览 器 性 能 的 呢 ? CSS 选择 器 对 性 能 的 影响 源 于 浏览 器 匹配 
选择 器 和 文档 元 素 时 所 消耗 的 时 间 ， 所 以 优化 选择 器 的 原则 是 应 尽量 避免 需要 消耗 更 多 匹配 时 间 
的 选择 器 。 因 此 ， 需 要 了 解 CSS 选择 器 匹配 的 机 制 。 例 如 : 

05 #header > a { 

06 font-family: Microsoft Yahei; 

(We 





通常 情况 下， 我 们 保持 了 从 左 到 右 的 阅读 习惯 ， 可 能 会 习惯 性 地 设 定 浏览 器 也 是 按照 从 左 到 
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右 的 方式 进行 匹配 的 规则 ， 因 而 推测 如 上 代码 会 先 查找 唯一 的 id 为 header 的 元 素 ， 再 将 样式 应 
用 到 直系 子 元 素 的 a 标签 上 ， 由 于 文档 中 只 有 一 个 id 为 header 的 元 素 ， 如 此 推断 这 条 选择 器 规 
则 的 匹配 性 能 开销 并 不 高 。 假 如 浏览 器 会 以 这 样 的 方式 工作 : 找到 唯一 的 id 为 header 的 元 素 ， 
然后 把 这 个 样式 规则 应 用 到 直系 子 元 素 中 的 a 元 素 上 。 

事实 上 ， 恰 好 相反 ，CSS 选择 器 是 按照 从 右 到 左 进行 匹配 的 规则 进行 的 。 正 因 如 此 ， 上 例 
中 看 似 高 效 的 选择 器 在 实际 中 的 匹配 开销 是 很 高 的 。#eader > a 浏览 器 必须 遍历 页 面 中 所 有 的 a 
元 素 并 且 确 定 其 父 元 素 的 这 是 否 为 header， 如 此 广泛 的 遍历 ， 匹 配 性 能 开销 非常 高 。 

同 理 ， 把 子 选择 器 修改 为 后 代 选 择 器 ， 由 于 在 遍历 页 面 中 所 有 a 元 素 后 还 需 向 其 上 级 遍历 直 
到 根 节点 ， 因 此 开销 会 更 高 : 





通 配 选 择 器 使 用 * 符号 表示 ， 可 匹配 文档 中 的 每 一 个 元 素 。 例 如 ， 将 所 有 元 素 的 字体 设置 
为 Microsoft Yahei: 





通 配 选 择 器 作用 于 所 有 的 元 素 ， 例 如 最 右边 为 通配符 : 





浏览 器 匹配 文档 中 所 有 的 元 素 后 分 别 向 上 逐 级 匹配 class 为 content 的 元 素 ， 直 到 文档 的 根 节 
点 ， 因 此 其 匹配 开销 是 非常 大 的 ， 通 常 比 开 销 最 小 的 ID 选择 器 高 出 1~3 个 数量 级 ， 所 以 应 避免 
使 用 关键 选择 器 是 通 配 选 择 器 的 规则 。 

又 例如 单 规则 的 属性 选择 器 : 


浏览 器 先 匹 配 所 有 的 元 素 ， 检 查 其 是 否 有 href 属性 并 且 herf 属性 值 等 于 #index， 然 后 分 别 向 
上 逐 级 匹配 class 为 selected 的 元 素 ， 直 到 文档 的 根 节点 。 所 以 应 避免 使 用 关键 选择 器 是 单 规则 
属性 选择 器 的 规则 。CSS 3 添加 了 复杂 的 属性 选择 器 ， 可 以 通过 类 正则 表达 式 的 方式 对 元 素 的 属 
性 值 进行 匹配 。 然 而 ， 这 些 类 型 的 选择 器 定 是 会 影响 性 能 的 ， 正 则 表达 式 匹 配 会 比 基 于 类 别 的 匹 
配 慢 很 多 。 大 部 分 情况 下 我 们 应 尽量 避免 使 用 半 、 上 FF、 伟 、$= 和 ~ 语法 的 属性 选择 器 。 

有 时 候 项 目的 模块 越 来 越 多 ， 功 能 越 来 越 复杂 ， 我 们 写 的 CSS 选择 器 会 内 套 多 层 ， 越 来 越 
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复杂 。 建 议 选择 器 的 嵌 套 最 好 不 要 超过 三 层 ， 例 如 : 





简洁 的 选择 器 不 仅 可 以 减少 CSS 文件 大 小 、 提 高 页 面 的 加 载 性 能 ， 浏 览 器 解析 时 也 会 更 加 
高 效 ， 也 会 提高 开发 人 员 的 开发 效率 ， 降 低 了 维护 成 本 。 

此 外 ， 应 当 移 除 空 的 CSS 规则 ， 一 方面 ， 删 除 无 用 的 样式 后 可 以 缩减 样式 文件 的 体积 、 加 
快 资源 下 载 速度 ， 另 一 方面 ， 对 于 浏览 器 而 言 ， 所 有 的 样式 规则 都 会 被 解析 后 索引 起 来 ， 即 使 是 
当前 页 面 无 匹配 的 规则 。 移 除 无 匹配 的 规则 、 减 少 索 引 项 ， 可 以 有 效 地 加 快 浏览 器 查找 速度 。 


日 .A 图 片 优化 


据 HTTP Archive (http://httparchive.org/interesting.php#bytesperpag) 2016 年 2 月 1 日 的 统计 
( 见 图 9.32) 显示 ， 图 片 占 页 面 总 内 容 的 比例 达到 64%， 如 此 导致 用 户 在 浏览 页 面 时 会 有 多 一 
半 的 流量 和 时 间 都 在 下 载 图 片 。 因 此 ， 图 片 优化 是 性 能 优化 的 重点 。 


全 Images ® Scripts 
9 Video ® Fonts 
© Siylesheets HTML 
® Other 





9.32 图 片 占 页 面 总 内 容 的 比例 


9.4.1 使 用 CSS 3 代替 图 片 


在 使 用 图 片 之 前 ， 不 妨 多 问 一 句 ， 此 处 真 的 需要 图 片 才能 实现 需要 的 效果 吗 ? 随 着 浏览 器 和 
Web 标准 的 极 快速 发 展 ， 大 部 分 效果 《〈 圆 角 、 阴 影 、 渐 变 填充 等 ) 都 可 以 用 纯粹 的 HTML、 
CSS、SVG、IconFont 等 加 以 实现 ， 实 现 这 些 效果 有 时 数 行 代 码 就 能 完成 ， 复 杂 情 况 下 可 以 使 用 
额外 的 效果 库 ， 适 当 的 效果 库 有 时 也 比 图 片 体积 小 得 多 。 这 些 效果 不 但 需要 的 空间 很 小 ， 而 且 在 
多 设备 、 多 分 辩 率 下 都 能 很 好 地 工作 ， 在 低级 浏览 器 上 也 可 以 实现 较 好 的 功能 降级 。 因 此 在 存在 
备 选 技术 的 情况 下 ， 应 该 首先 选择 这 些 技术 ， 只 有 在 不 得 不 使 用 图 片 的 时 候 才 使 用 图 片 来 表 
现 效果 。 

减少 图 片 能 减少 HTTP 请 求 ， 同 时 减少 页 面 大 小 ， 更 容易 维护 。 例 如 圆 角 、 阴 影 、 渐 变 填 
充 等 效果 ， 这 些 样式 不 需要 使 用 图 片 ， 通 过 CSS 3 实现 〈 见 图 9.33)， 加 快 加 载 时 间 。 
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立即 购买 


加 入 购物 车 


图 933 使 用 CSS 3 代替 图 片 


在 图 9.33 所 示 的 按钮 中 包含 圆 角 、 阴 影 等 效果 。 这 种 按钮 的 使 用 范围 非常 广泛 ， 实 现代 码 
如 下 。 


【代码 94】 





188 


、 第 9 章 HTML 5 移动 性 能 优化 








从 第 20 行 和 第 38 行 代码 可 以 看 出 ， 使 用 简单 的 样式 (如 border-radius、box-shadow) 即 可 
实现 圆 角 和 阴影 效果 ， 而 不 需要 生硬 地 使 用 图 片 。 除 此 之 外 ， 常 用 的 属性 还 有 : 


linear and radial gradients 
rgba 

transform 

css mask 


虽然 CSS 3 可 以 减少 HTTP 请 求 ， 但 是 增加 了 浏览 器 处 理 负荷 。 图 9.34 中 列 出 了 几 个 常用 
CSS 3 属性 的 处 理 时 间 。 需 要 特别 注意 的 是 ，box-shadow 对 处 理 时 间 的 影响 最 大 。 在 扁平 化 设计 
中 常常 不 使 用 阴影 设计 。 
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图 9.34 各 属性 处 理 时 间 对 比 


9.4.2 使 用 Data URI 代替 图 片 


Data URI 是 一 种 提供 让 外 置 资源 直接 内 翌 在 页 面 中 的 方案 。 这 种 技术 允许 我 们 只 需 单 次 
HTTP 请 求 即 可 获取 所 有 需要 引用 的 图 片 与 样式 资源 。 例 如 ， 需 要 实现 如 图 9.35 所 示 的 手绘 
角 箭 头 ， 通 过 CSS 代码 实现 较为 复杂 ， 那 么 如 何 通过 Data URI 实现 呢 ? 














休斯顿 华人 歌 友 会 更 多 > 
图 9.35 使 用 Data URI 实 现 

实现 代码 如 下 : 

【代码 9-5】 
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在 第 51 行 代码 中 ，background-image 属性 的 url 值 就 是 使 用 Data URI 来 实现 的 。 

在 移动 显示 屏 上 ， 空 间 常 常 受 限 ， 因 此 经 常会 使 用 图 标 来 引导 用 户 执行 关键 操作 ， 例 如 图 
9.36 和 图 9.37 所 示 的 Facebook 首页 及 Twitter 首页 就 依赖 于 使 用 图 标 来 导航 、 切 换 重要 的 菜单 、 
关闭 提示 或 执行 重要 的 操作 日 志 等 。 

加 [33 
添加 照片 ” 陪 答 到 回 更 多 


E | 分 享 新 鲜 事 





Mashable Wmashabe 


Adele, Rihanna and Little Mix killed it on the 
BRIT Awards red carpet in London 
on.mash.to/1QfaDdh 
pic.twitter,com/ngFfH1pynp 


姓名 、 邮 箱 或 手机 号 





图 9.36 ”Facebook 首页 示例 9.37 Twitter 首页 示例 


要 实现 这 些 图 标 有 多 种 方法 。 一 种 方法 是 使 用 CSS Sprites。 例 如 ，Twitter 首页 的 图 标 〈 见 
图 9.38) 就 是 使 用 CSS Sprites 实现 的 。 
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合 合 @@## 上 
入 仿 信玄 议 see 个 X OY 
pr ple ‘0 DY 
he 9 
ob I 
和 + @9 OD 
y 人 母 太 三 4 中 四 。 
多 和 共 画 wwX- 9 
xxQa ee® 
和 VX 
图 938 使 用 CSS Sprites 实现 的 Twitter 首页 图 标 


使 用 CSS Sprites 最 大 的 好 处 是 节省 HTTP 请 求 数 ， 但 是 合并 大 量 的 小 图 标 对 图 像 体 积 的 减 
小 仍然 有 限 ， 且 不 易于 维护 。 

另 一 种 方法 是 使 用 IconFont， 修 改 图 标 自身 的 属性 (如 颜色 、 大 小 、 透 明度 等 ) 时 非常 方 
便 ， 主 要 是 使 用 自 定义 字体 〈@font-face)。 例 如 : 
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当然 ， 在 移动 端 ， 不 考虑 Android 2.3 兼容 的 情况 下 ， 目 前 可 以 只 引用 tt 一 个 文件 : 





在 字体 文件 相对 较 小 的 情况 下 ， 例 如 小 于 10KB 的 t 文 件 建议 在 此 处 使 用 Data URI 在 CSS 
文件 中 定义 ， 例 如 : 





IconFont 使 用 起 来 虽然 方便 ， 又 有 诸多 优点 ， 例 如 可 以 自由 变化 大 小 、 矢 量 不 失真 、 自 由 修 
改 颜色 、 可 以 添加 一 些 视觉 效果 《〈 如 阴影 、 旋 转 、 透 明度 )， 并 且 兼 容 下 6 等 ,但 是 制作 
IconFont 图 标 也 增加 了 重 构成 本 。 同 时 ， 从 以 上 代码 可 以 看 出 ， 使 用 IconFont 也 仍然 需要 加 载 一 
个 图 标 库 ， 该 图 标 库 的 体积 会 随 着 需要 使 用 的 图 标的 增多 而 增 大 ， 在 移动 端 上 下 载 这 样 的 图 标 库 
仍 显 吃力 。 


9.4.3 使 用 SVG 代替 图 片 
还 要 一 种 方案 是 使 用 SVG 来 代替 Icon Font。SVG (Scalable Vector Graphics) 是 一 种 矢量 图 
格式 。 其 主要 的 优势 有 : 


文件 体积 小 ， 能 够 被 大 量 压缩 。 

图 片 可 无 限 放 大 而 不 失真 ( 矢量 图 的 基本 特征 ) 。 
在 视网膜 显示 屏 上 效果 极 佳 。 

能 够 实现 互动 和 滤 镜 效果 。 


目前 SVG 的 浏览 器 支持 情况 如 图 9.39 所 示 ， 可 以 参考 http://caniuse.com/#feat=svg。 
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939 SVG 的 浏览 器 支持 情况 
使 用 img 和 object 标签 直接 引用 SVG 是 早期 常见 的 使 用 方法 ， 例 如 使 用 img 标签 : 





在 背景 图 中 使 用 SVG: 





添加 样式 : 





使 用 object 引入 SVG: 





但 是 这 种 方法 的 缺点 主要 在 于 要 求 每 个 图 标 都 单独 保存 成 一 个 SVG 文件 ， 使 用 时 也 是 单独 
请 求 的 。 如 果 在 页 面 中 使 用 多 个 图 标 ， 每 个 都 是 单独 请 求 的 话 会 产生 很 多 请 求 数 ， 增 加 服务 端的 
负载 并 拖 慢 页 面 加 载 速度 ， 因 此 现在 也 不 推荐 在 页 面 广泛 使 用 这 种 方法 。 

使 用 Data URIs 引入 SVG 文件， 例如: 


又 如 : 
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01 <img src="data:image/svgtxml;base64, [data]l"> 


9.4.4 IconFont 与 SVG 优 劣 对 比 
目前 所 有 图 标 方案 都 会 存在 这 样 或 那样 的 缺陷 ， 我 们 需要 的 是 针对 不 同 场景 、 不 同 需求 来 选 
用 不 同 的 方案 ， 可 参考 表 9-3。 
表 9-3 IconFont 与 SVG 对 比 
缺点 


欠缺 语义 性 ;不同 浏览 器 泻 染 方式 不 同 ， 存 
在 锯齿 现象 


原生 只 支持 到 正 9+; 方案 众多 ， 不 同方 案 都 
存在 一 定 缺 陷 





IconFont 从 很 大 程度 上 解决 了 在 页 面 设计 过 程 中 切 图 带 来 的 不 便 ， 以 及 对 高 清 设 备 显 示 模 糊 
现象 的 问题 。 但 是 对 于 复杂 的 图 标 显示 并 不 是 非常 完美 ， 原 因 是 因为 不 同 浏览 器 对 字体 的 演 染 方 
式 不 同 ， 抗 锯齿 的 效果 欠 佳 。 并 且 由 于 缺乏 语义 性 ， 对 搜索 引擎 或 是 其 他 阅读 设备 的 支持 并 不 友 
好 ， 类 似 于 <img> 标 签 不 添加 alt 属性 的 问题 。 

如 果 采 用 SVG 方案 ， 也 会 自 带 有 title 功能 ， 即 仍 可 把 图 标 用 语音 描述 出 来 。SVG 的 不 同 实 
现 方案 优 劣 也 不 尽 相同 ， 可 参见 表 9-4。 


表 9-4 SVG 不 同 实现 方案 对 比 






单一 的 HTTP 请 求 

可 用 background-size 调整 大 小 

易于 引用 (例如 <span class="icon icon- 
chrome"></span>) 

可 用 background-size 调整 大 小 
易于 引用 


减少 HTTP 请 求 







对 单个 图 标 调整 大 小 烦琐 ， 如 需 调整 大 
小 则 需要 同时 调整 background-size 和 
background-position 


CSS sprite 











外 部 引用 的 background 


多 个 HTTP 请 求 


性 能 欠 佳 〈CSS 样式 表 文件 变 大 ， 若 放 
入 HTML 中 则 不 易 做 缓存 ) 






直接 和 入 SVG 的 















































background Image 易于 引用 兼容 性 不 佳 
单个 图 标 大 小 调整 灵活 
易于 引用 (例如 <svg><use xlink:href= | 声明 较 烦 琐 

使 用 <use> 进 行 外 部 引用 | "def.svg#icon--feed"/></svg>) 兼容 性 问题 (IE 9、IE 10 下 外 部 引用 
易于 进行 单独 样式 控制 SVG 文件 存在 问题 ) 
易于 缓存 
单个 图 标 大 小 调整 灵活 声明 较 烦 琐 

使 用 <use> 进 行内 搬 易于 引用 (例如 <svg><use xlink:href= ”| 性 能 欠 佳 (每 个 HTML 文件 都 存在 对 应 
"#icon--feed"/></svg>) 的 SVG 文件 ， 不 易 缓存 ) 

p 单个 图 标 大 小 调整 灵活 多 个 HTTP 请 求 
ee 易于 引用 (例如 <img sro-"xxx svg">) | 样式 调整 困难 
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综 上 所 示 ，IconFont 与 SVG 方案 各 有 优 劣 。 在 实际 的 项 目 中 可 根据 具体 的 项 目 应 用 情况 进 
行 方案 选择 。 


9.4.5 ”使 用 压缩 图 片 


如 果 页 面 需要 实现 的 效果 的 确 只 能 通过 图 片 来 表现 ， 那 么 选择 合适 的 图 片 格式 是 图 片 优 化 的 
第 一 步 。 图 片 格式 涉及 的 词汇 包括 矢量 图 、 标 量 图 、SVG、 有 损 压 缩 、 无 损 压 缩 等 。 因 此 ， 首 
先 通过 表 9-5 来 看 看 各 种 图 片 格式 的 特点 。 


表 9-5 各 图 片 格式 的 特点 

















图 片 格式 ”压缩 方式 透明度 动画 浏览 器 兼容 


Firefox 
em | | Safari 


iOS Safari 
目 上 有 
缩 体 验 SVG 


需要 动态 控制 图 片 特效 


从 表 9-5 中 可 以 看 出 ，JPEG 在 压缩 率 不 高 时 保留 的 细节 较 好 ， 人 眼 的 结构 很 适合 查看 JPEG 
压缩 后 的 照片 ， 可 以 充分 忽略 并 在 脑 中 补 齐 细节 ， 因 此 ， 对 于 颜色 丰富 的 照片 ，JPEG 格式 是 通 
用 的 选择 。GIF 支持 的 颜色 范围 为 256 色 ， 而 且 仅 支持 完全 透明 /完全 不 透明 ， 如 果 需 要 较 通 用 
的 动画 ，GIF 是 唯一 可 用 的 选择 。SVG 是 使 用 XML 定义 的 矢量 图 形 ， 生 成 的 图 片 在 各 种 分 辨 率 
下 均 可 自由 放 缩 ， 并 且 可 以 通过 JavaScript 等 接口 自由 变换 图 片 特效 ， 可 以 完成 其 中 部 分 元 素 的 
自由 旋转 、 移 动 、 变 换 颜色 等 ， 因 此 ， 如 果 图 片 由 标准 的 几何 图 形 组 成 ， 或 需要 使 用 程序 动态 控 
制 其 显示 特效 ， 可 以 考虑 SVG 格式 。PNG-8 能 够 显示 256 种 颜色 ， 但 能 够 同时 支持 256 阶 透 
明 ， 因 此 颜色 数 较 少 但 需要 半 透 明 的 情景 (如 微 信 动 画 大 表情 ) 可 以 考虑 PNG-8; PNG-24 可 以 
显示 真 彩色 ,但 不 支持 透明 ， 颜 色 丰 富 的 图 片 推 荐 使 用 (如 屏幕 截图 、 界 面 设计 图 ); PNG-32 
可 以 显示 真 彩色 ， 同 时 支持 256 阶 透明 ， 效 果 最 好 但 尺寸 也 最 大 。 如 果 需 要 清晰 地 显示 颜色 丰富 
的 图 片 ，PNG 格式 比较 合适 。 


适应 场景 


复杂 颜色 及 形状 ， 尤 其 是 
照片 
简单 颜色 ， 动 画 GIF 












APNG 需要 半 透 明 效 果 的 动画 








复杂 颜色 及 形状 


浏览 器 平台 可 预知 Wp 





简单 图 形 ， 需 要 良好 的 放 
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图 片 压缩 优化 一 般 分 为 2 种 : 


@。 有 损 优 化 ， 删 除 没有 出 现 或 极 少 出 现 过 的 颜色 ， 合 并 相 邻 的 相近 颜色 。 这 一 步 并 不 是 
必需 的 ， 如 PNG 格式 就 直接 进入 下 一 步 。 
@ 无 损 优化 ， 压 缩 数据 ， 删 除 不 必要 的 信息 。 


JPEG 和 PNG 格式 的 图 片 生 成 后 ， 一 般 还 有 进一步 优化 的 空间 ， 例 如 JPEG 格式 的 照片 中 ， 
可 能 携带 有 相机 的 Exif 信息 ，PNG 格式 的 图 片 中 可 能 带 有 Fireworks 等 软件 的 图 层 信息 等 。 去 
除 这些 额 外 信息 后 ， 还 可 以 通过 减 小 图 片 的 调 色 板 去 除 没有 出 现 过 的 颜色 ， 以 及 合并 相 邻 的 相同 
颜色 等 手段 来 进行 优化 。 原 理性 的 内 容 这 里 不 再 歼 述 ， 仅 介绍 工程 中 可 用 的 优化 工具 。 


9.4.6 使 用 srcset 


当 响应 式 布局 出 现 后 ， 要 做 到 “恰好 ”显示 客户 端 所 需 大 小 的 图 片 就 变 得 极其 困难 。 例 如 ， 
在 屏幕 中 通过 CSS 或 者 标签 的 wihth/height 属性 将 一 幅 200X 200 的 图 片 调整 为 100X 100 大 小 ， 
其 中 就 有 (200X200) - 〈100X100) =30000 像素 是 浪费 的 ， 这 占 到 了 图 片 尺寸 的 75%! 我 们 要 
支持 上 至 1920 宽度 、 下 至 320 宽度 的 无 数 种 设备 ， 如 果 使 用 1920 宽度 的 图 片 ， 那 么 在 小 型 设备 
(这 类 设备 往往 对 网 速 和 流量 更 加 敏感 ) 上 每 个 用 户 都 要 付出 额外 的 带宽 和 等 待 时 间 ， 如 果 使 用 
320 宽度 的 图 片 ， 那 么 在 1920 的 屏幕 上 就 非常 让 人 难以 接受 。 

因此 ， 我 们 需要 图 片 也 能 “响应 式 ” 加 载 ， 即 根据 所 在 设备 的 不 同 ， 加 载 不 同 尺寸 的 图 片 。 
所 幸 的 是 ， 我 们 有 了 一 些 新 的 标记 来 解决 响应 式 图 片 问 题 : 


® srcset 
® sizes 

® picture 
®@ source 


使 用 srcset， 我 们 可 以 提供 多 个 分 辨 率 的 图 片 ， 使 其 在 不 同 的 视 口 宽度 和 屏幕 分 辩 率 下 高 效 
地 缩放 ， 有 选择 性 地 给 巨大 的 或 是 高 分 辩 率 屏幕 发 送 巨大 的 源 图 片 ， 同 时 把 小 一 些 的 内 容 发 给 其 
他 小 屏幕 用 户 。 例 如 : 





从 上 面 的 代码 段 看 出 srcset 属性 使 用 一 系列 逗号 分 隔 的 属性 值 ， 在 每 个 URL 后 面 添加 一 个 
“宽度 描述 符 ” 来 指定 每 个 图 片 的 像素 宽度 ， 这 个 属性 值 告 诉 浏览 器 图 片 的 大 小 或 限制 。 可 将 该 
属性 值 分 解 如 下 : 
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屏幕 尺寸 为 0~480px 之 间 的 显示 图 片 small 480;jpg。 
屏幕 尺寸 为 481~768px 之 间 的 显示 图 片 standard 768jpg。 
屏幕 尺寸 为 769~1024px 之 间 的 显示 图 片 large_1024.jpg。 
高 像素 密度 屏幕 显示 图 片 large@2x.jpg。 

其 他 屏幕 使 用 图 片 standard jpg。 


目前 ，srcset 属性 的 兼容 性 如 图 9.40 所 示 ， 可 参考 http://caniuse.com/#search=srcset。 


ne 





图 9.40 sreset 属性 兼容 性 


可 以 通过 polyfill (https://github.com/borismus/sreset-polyfill》 来 使 用 srcset 属性 ， 并 完成 兼容 
问题 。 需 要 注意 的 是 ， 按 需 加 载 虽然 能 提升 首 屏 加 载 的 速度 ， 但 是 也 有 可 能 带 来 更 多 的 界面 重 
绘 ， 影 响 泻 染 性 能 ， 因 此 要 评估 具体 的 业务 场景 再 做 决定 。 

另外 一 种 建议 的 响应 式 图 片 的 解决 方案 是 一 个 新 的 元 素 picture， 该 元 素 的 使 用 与 img 元 素 
的 使 用 是 一 致 的 。 该 元 素 的 目标 是 提供 一 种 为 指定 的 设备 和 基于 媒体 查询 的 设备 上 展示 图 片 的 方 
法 ， 例 如 : 





picture 元 素 是 包 陵 source 元 素 和 img 元 素 的 容器 。img 元 素 有 助 于 帮助 暂 不 支持 picture 元 
素 的 浏览 器 泻 染 图 片 。 在 第 3 行 ， 可 以 看 到 media 属性 用 于 定义 最 小 尺寸 为 480px 的 屏幕 显示 的 
图 片 。 同 时 也 使 用 sreset 属性 定义 高 像素 密度 屏幕 所 需 显 示 的 图 片 。 从 第 4 行 代码 可 以 看 到 
media 属性 用 于 定义 设备 屏幕 最 小 尺寸 为 768px 展示 的 图 片 。 分 析 以 上 代码 ， 图 片 将 如 下 展示 : 


屏幕 宽度 在 0-479px 之 间 的 设备 展示 smalljpg。 
屏幕 宽度 在 480~767px 之 间 的 设备 展示 mid.jpg ， 高 像素 密度 屏幕 展示 mid@2xjpg。 
屏幕 宽度 大 于 等 于 768px 的 设备 展示 largejpg。 
不 支持 picture 元 素 的 浏览 器 将 加 载 defaultjpg。 


我 们 发 现 source 元 素 内 部 支持 srcset 属性 真 的 很 令 人 吃惊 。 它 实际 上 是 鼓励 帮助 为 浏览 器 提 
供 适 当 的 图 像 。 
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除了 定义 具体 使 用 哪 幅 图 片 和 媒体 查询 来 定义 之 外 ，picture 元 素 还 有 其 他 功能 。 你 也 可 以 用 
它 做 一 些 有 限 的 特性 支持 测试 来 提供 基于 浏览 器 支持 图 像 格式 的 图 像 。 目 前 picture 的 浏览 器 支 
持 情况 如 图 9.41 所 示 ， 可 参考 http://caniuse.com/#search=picture。 


= # Ra 
Edge Firefox Chrome Safari Opera IST OpeaMn Ardrod co 条 





图 9.41 picture 的 浏览 器 支持 情况 


9.4.7 使 用 WebP 


WebP 是 一 种 最 新 的 图 像 格式 。 这 种 格式 从 VP8 视频 压缩 编 解码 器 开始 就 有 着 深刻 的 历史 。 
WebP 技术 最 早 是 由 On2 开发 的 ， 现 在 由 Google 支持 。 转 换 和 压缩 图 片 为 WebP 格式 的 工具 可 
参考 https://developers.google.com/speed/webp/ 。 一 些 图 片 处 理 软 件 也 支持 WebP 格式 ， 例 如 
Pixelmator (www.pixelmatorcomy/)。 

WebP 格式 与 PNG 格式 类 似 ， 支 持 高 数量 级 的 颜色 ， 支 持 透 明度 。 这 也 使 得 WebP 适用 于 
代替 JPEG、GIF 和 PNG 格式 。WebP 文件 在 减 小 文件 方面 取得 了 惊人 的 成 效 ， 即 使 有 视觉 干扰 
也 是 非常 小 的 。 图 9.42、 图 9.43 展示 了 不 同 图 像 格式 之 间 的 差异 。 





JPEG (15KB) 





WebP (9.3KB) 





9.42 ”JPEG 格式 与 WebP 格式 的 比较 


PNG (CSKB) WebP (2.8KB) 


9.43 PNG 格式 与 WebP 格式 的 比较 
从 图 9.42 和 图 9.43 中 可 以 看 出 在 图 片 质量 相同 的 情况 下 ，WebP 体积 更 小 ， 压 缩 之 后 质量 
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无 明显 变化 。 当 考虑 到 移动 用 户 的 时 候 ，WebP 不 但 是 值得 考虑 的 ， 而 且 是 推荐 使 用 的 ， 可 用 于 
节省 非常 多 的 用 户 流量 。WebP 的 其 他 特性 包括 : 

@ ”WebP 支持 动画 ， 类 似 于 GIF 文 件 。 

@ WebP 同时 支持 有 损 压缩 和 无 损 压 缩 。 

@ ”WebP 支持 最 大 分 状 率 16384 x 16384。 

@ 支持 WebP 的 浏览 器 仅 限 于 Chrome、Opera。 


目前 WebP 格式 的 浏览 器 支持 情况 如 图 9.44 所 示 ， 可 参考 http://caniuse.com/#search=webp。 





= = * 
Firefox Chiome lossafari ” OperaMini™ Androld * Chromefor 













图 9.44 WebP 的 浏览 器 支持 情况 


现 如 今 ， 网 站 与 移动 应 用 的 富 媒体 内 容 越 来 越 丰富 ， 追 踪 带 宽 使 用 情况 、 优 化 下 载 和 上 传 时 
间 对 于 优化 用 户 体验 都 是 至 关 重 要 的 。 与 JPEG 或 PNG 相 比 ， 包 括 在 图 片 大 小 和 质量 之 间 的 平 
衡 ， 以 及 这 个 新 兴 的 格式 支持 的 功能 等 方面 来 讲 ，WebP 有 许多 优点 。WebP 格式 是 能 够 帮助 优 
化 用 户 体验 的 又 一 利器 ， 虽 然 浏 览 器 对 WebP 的 支持 仍 有 很 多 需要 改进 的 地 方 ， 但 是 恰当 使 用 一 
些 工具 和 技术 ， 很 容易 体会 到 WebP 的 好 处 ， 也 不 会 朴 远 使 用 不 支持 这 种 格式 的 浏览 器 的 用 户 。 


加. 演 染 优化 


优化 页 面 泻 染 是 无 线 Web 开发 性 能 优化 的 重要 部 分 。 在 PC 上 ， 相 对 高 性 能 的 硬件 和 高 端 
显卡 使 得 页 面 的 泻 染 性 能 提升 。 而 在 移动 端 ， 对 于 相对 有 限 的 硬件 性 能 ， 并 且 没 有 专门 处 理 显示 
的 硬件 ， 使 得 所 有 页 面 泻 染 的 工作 都 由 CPU 来 执行 ， 而 在 CPU 执行 频率 的 限制 下 会 造成 页 面 泻 
染 性 能 问题 。 当 页 面 出 现 大 量 的 泻 染 变化 时 ， 就 会 出 现 页 面 卡 顿 现象 ， 例 如 长 列表 滑动 、 频 繁 切 
换 、 大 量 动画 等 。 演 染 问题 即 是 体验 问题 ， 因 此 ， 需 要 进行 泻 染 优化 。 

本 节 主 要 从 以 下 几 个 方面 进行 介绍 泻 染 优化 。 

@ 。 泻 染 流程 。 

使 用 Viewport 加 速 页 面 泻 染 。 
动画 优化 。 

高 频 事 件 优化 。 

GPU 加 速 。 
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9.5.1 泻 染 流程 


在 页 面 开发 时 ， 我 们 需要 理解 所 写 的 页 面 代码 是 如 何 转换 成 屏幕 上 显示 的 像素 的 。 这 个 转换 
演 染 过 程 如 图 9.45 所 示 。 


医治- a Ee 


9.45 演 染 流程 
如 图 9.45 所 示 ， 代 码 转化 为 显示 像素 的 泻 染 流程 包含 以 下 5 个 关键 步骤 。 


DT01 第 一 个 步骤 是 JavaScript 的 处 理 。 一 般 来 说 ， 我 们 会 使 用 JavaScript 来 实现 一 些 视觉 变 
化 的 效果 。 例 如 使 用 JavaScript 制作 动画 、 对 一 个 数据 集 进行 排序 ， 或 是 在 页 面 中 添 
加 一 些 额外 的 补充 DOM 元 素 等 处 理 。 当 然 ， 除 了 使 用 JavaScript， 我 们 还 可 以 使 用 其 
他 一 些 常 用 方法 实现 视觉 变化 效果 ， 比 如 CSS _ Animations 、Transitions 和 Web 
Animation API。 

人 62 第 二 个 步骤 是 样式 的 计算 。 样 式 计算 是 根据 CSS 选择 器 进行 计算 ， 例 如 .headline 
或 ,nav > .nav_item， 以 便 对 每 个 DOM 元 素 匹配 对 应 的 CSS 样式 。 这 一 步 计算 结束 之 
后 ， 就 确定 了 每 个 DOM 元 素 上 该 应 用 什么 CSS 样式 规则 。 

人 03 样式 计算 确定 了 每 个 DOM 元 素 的 样式 规则 ， 可 以 具体 计算 每 个 DOM 元 素 最 终 在 屏 
幕 上 显示 的 大 小 和 位 置 ， 即 完成 布局 的 过 程 。 页 面 中 元 素 的 布局 是 相对 的 ， 因 此 一 个 
元 素 的 布局 发 生变 化 ， 会 联动 地 引发 其 他 元 素 的 布局 发 生变 化 。 例 如 <body> 元 素 的 宽 
度 变 化 会 影响 其 子 元 素 的 宽度 ， 其 子 元 素 宽 度 的 变化 也 会 继续 对 其 孙子 元 素 产 生 影 
响 。 因 此 对 于 浏览 器 来 说 ， 布 局 过 程 是 经 常 发 生 的 。 

人 4 绘制 实际 是 像素 填充 的 过 程 ， 包 括 绘制 文字 、 颜 色 、 图 像 、 边 框 和 阴影 等 ， 也 就 是 一 
个 DOM 元 素 所 有 的 可 视 效果 。 一 般 来 说 ， 这 个 绘制 过 程 是 在 多 个 层 上 完成 的 。 

人 ED5 由 于 对 页 面 中 DOM 元 素 的 绘制 是 在 多 个 层 上 进行 的 ， 因 此 在 每 个 层 上 完成 绘制 过 程 
之 后 ， 浏 览 器 会 将 所 有 层 按 照 合 理 的 顺序 合并 成 一 个 图 层 ， 然 后 显示 在 屏幕 上 。 对 于 
有 位 置 重 登 的 元 素 页 面 ， 这 个 过 程 尤其 重要 ， 因 为 一 旦 图 层 的 合并 顺序 出 错 ， 就 会 导 
致 元 素 显示 异常 ， 这 就 是 泻 染 层 的 合并 。 


在 这 关键 的 5 个 步骤 中 ， 每 一 步 中 都 有 使 得 页 面 发 生 卡 顿 的 可 能 ， 因 此 一 定 要 弄 清楚 代码 
将 会 运行 在 哪 一 步 ， 并 在 哪 一 步骤 中 有 可 能 损耗 大 量 的 性 能 。 虽 然 在 理论 上 ， 页 面 的 每 一 帧 都 是 
经 过 这 5 个 步骤 处 理 之 后 再 呈现 出 来 ， 但 并 不 意味 着 页 面 每 一 帧 的 泻 染 都 需要 经 过 上 述 5 个 步骤 
的 处 理 。 实 际 上 ， 对 视觉 变化 效果 的 一 个 帧 的 泻 染 有 3 种 常用 的 处 理 流 程 。 

(1) 第 一 种 是 完成 完整 的 5 个 步骤 的 处 理 ， 例 如 ， 当 页 面 中 一 个 DOM 元 素 的 布局 属性 发 


生 了 修改 ， 即 改变 了 元 素 的 样式 〈 如 宽度 、 高 度 或 者 位 置 等 )， 那 么 浏览 器 会 检查 哪些 元 素 需 要 
重新 布局 ， 然 后 对 页 面 激发 一 个 reflow 过 程 完成 重新 布局 。 被 reflow 的 元 素 接 下 来 也 会 激发 给 
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制 过 程 ， 最 后 激发 泻 染 层 合并 过 程 ， 生 成 最 后 的 画面 。 
(2) 第 二 种 是 不 经 历 重新 布局 的 过 程 ， 如 图 9.46 所 示 。 


图 9.46 跳 过 布局 的 过 程 


当 页 面 中 一 个 DOM 元 素 的 “paint only” 属 性 发 生 修改 ， 例 如 背景 图 片 、 文 字 颜 色 或 阴影 
等 ， 这 些 属性 不 会 影响 页 面 的 布局 ， 因 此 浏览 器 会 在 完成 样式 计算 之 后 跳 过 布局 过 程 ， 只 做 绘制 
和 泻 染 层 合并 过 程 。 

(3) 第 三 种 是 跳 过 布局 和 绘制 的 过 程 ， 如 图 9.47 所 示 。 


JavaScript 、 
样式 计算 [ 布局 > 绘制 my> 


图 9.47 ” 跳 过 布局 和 绘制 的 过 程 


当 修 改 页 面 中 一 个 非 样 式 且 非 绘制 的 CSS 属性 时 ， 浏 览 器 会 在 完成 样式 计算 之 后 跳 过 布局 
和 绘制 的 过 程 ， 直 接 做 泻 染 层 合并 。 

性 能 优化 是 一 门 做 减法 的 艺术 。 显 然 ， 第 三 种 泻 染 方式 在 性 能 上 是 最 理想 的 ， 对 于 动画 和 滚 
动 这 种 负荷 很 重 的 泻 染 ， 要 争取 使 用 第 三 种 泻 染 流程 。 在 泻 染 优化 的 过 程 中 ， 首 先 要 尽力 简化 页 
面 泻 染 过 程 ， 然 后 使 泻 染 过 程 的 每 一 步 都 尽量 高 效 。 


9.5.2 ”使 用 Viewport 加 速 页 面 泻 染 


手机 浏览 器 在 泻 染 网 页 时 ， 一 般 会 在 一 个 比 手机 屏幕 更 宽 的 虚拟 窗口 〈viewport) 中 泻 染 页 
面 。 这 样 做 的 目的 主要 是 解决 PC 网 页 在 手机 上 压缩 进 一 个 小 屏幕 时 导致 的 难以 浏览 和 使 用 的 问 
题 。 在 手机 上 引入 viewport 的 meta 标签 ， 使 得 开发 者 可 以 控制 视 口 的 尺寸 及 比例 。 例 如 : 





其 中 ，width 控制 viewport 的 大 小 ， 取 值 可 以 是 具体 的 像素 值 或 者 device-width。 当 取 值 为 
device-width 时 ，viewport 的 宽度 正好 适 配 浏览 器 宽度 ， 即 网 页 宽度 为 100% 时 ， 宽 度 正好 占 满 手 
机 浏览 器 宽度 。height 与 width 相对 应 。initial-scale 用 于 设置 viewport 的 初始 缩放 比例 。 
minimum-scale 用 于 设置 viewport 的 最 小 缩放 比例 。maximum-scale 用 于 设置 viewport 的 最 大 缩 
放 比 例 。uesr-scalable 用 于 设置 是 否 允许 用 户 手 动 缩放 。 
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查看 以 下 具体 的 使 用 案例 : 


以 上 设置 强制 让 文档 的 宽度 与 设备 的 宽度 保持 1:1， 并 且 文 档 最 大 的 宽度 比例 是 1.0， 且 不 
允许 用 户 点 击 屏幕 放大 浏览 。 尤 其 要 注意 的 是 ，content 的 取 值 中 多 个 属性 的 设置 一 定 要 用 逗号 
和 空格 来 隔 开 ， 不 规范 的 设置 将 不 会 起 作用 。 

一 般 情 况 下 ， 在 所 有 无 线 页 面 的 头 部 ， 都 要 加 上 此 viewport 的 设置 ， 如 果 不 加 上 此 数值 ， 
某 些 浏览 器 则 会 根据 自身 的 判断 自行 对 页 面 进行 放大 或 缩小 等 处 理 ， 造 成 页 面 无 法 正常 访问 ， 特 
别 是 某 些 APP 中 嵌入 了 webkit 浏览 器 来 进行 访问 的 时 候 ， 会 出 现 以 上 所 说 的 情况 ， 因 此 为 了 保 
证 设计 的 网 页 在 所 有 手机 中 显示 保持 一 致 ， 需 加 上 此 viewport 设置 。 

viewport 中 的 设置 数值 一 般 不 需要 进行 修改 ， 因 为 现在 的 数值 已 经 满足 了 绝 大 多 数 项 目 。 在 
非常 特殊 的 页 面 中 ， 若 需要 用 户 进行 手动 缩放 操作 ， 需 设置 user-scalable 取 值 为 yes。 如 果 修改 
了 数值 ， 就 需要 在 不 同 的 手机 上 进行 详细 的 测试 ， 否 则 会 有 预期 外 的 事情 发 生 。 

除了 viewport 之 外 ， 还 有 几 个 meta 标签 对 无 线 开发 也 起 到 非常 重要 的 作用 ， 例 如 : 


其 中 ，apple-mobile-web-app-capable 是 iPhone 设备 中 的 Safari 浏览 器 私有 meta 标签 ， 表 示 
允许 全 屏 模式 浏览 ，apple-mobile-web-app-status-bar-style 也 是 iPhone 的 私有 标签 ， 指 定 iPhone 
中 Safari 顶端 的 状态 条 样式 ，format-detection 设置 设备 忽略 将 页 面 中 的 数字 识别 为 电话 号 码 。 


9.5.3 动画 优化 


目前 ， 移 动 设备 上 一 般 使 用 60Hz 的 屏幕 刷新 率 。 因 为 移动 设备 对 于 功 耗 的 要 求 更 高 ， 要 提 
高 手机 屏幕 的 刷新 率 ， 对 于 手机 来 说 ， 逻 辑 功 耗 会 随 着 频率 的 增加 而 线性 增 大 ， 同 时 更 高 的 刷新 
率 意味 着 更 短 的 数据 写 入 时 间 ， 对 屏幕 设计 来 说 难度 更 大 。 因 此 ， 如 果 在 页 面 中 有 一 个 动画 或 渐 
变 效果 ， 或 是 用 户 正在 滑动 页 面 ， 那 么 浏览 器 演 染 动画 或 页 面 的 每 一 帧 的 速率 也 需要 跟 设 备 屏幕 
的 刷新 率 保持 一 致 。 

也 就 是 说 ， 浏 览 器 对 每 一 帧 画面 的 泻 染 工作 需要 在 16 上 毫秒 (1/60 秒 =16.66 毫秒 ) 之 内 完 
成 。 但 实际 上 ， 在 泻 染 某 一 帧 画面 的 同时 ， 浏 览 器 还 有 一 些 额外 的 工作 要 做 〈 如 演 染 队列 的 管 
理 、 泻 染 线程 与 其 他 线程 之 间 的 切换 等 处 理 )。 因 此 单纯 的 泻 染 工作 ， 一 般 需要 控制 在 10 毫秒 之 
内 完成 ， 才 能 达到 流畅 的 视觉 效果 。 如 果 超 过 了 这 个 时 间 限 度 ， 页 面 的 泻 染 就 会 出 现 卡 顿 效 果 ， 
形成 很 糟 灿 的 用 户 体验 。 

在 介绍 动画 优化 之 前 ， 我 们 先 讨论 一 下 泻 染 类 型 。 泻 染 类 型 是 指 该 类 型 的 主要 功能 是 在 泻 染 
HTML 结构 上 ， 也 就 是 在 结构 上 加 上 各 种 颜色 和 尺寸 等 。 可 以 说 CSS 的 一 大 部 分 功能 做 的 都 是 
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这 些 事情 。 演 染 类 型 按照 不 同 的 角度 可 以 分 为 很 多 种 类 型 ， 从 维度 上 区 分 可 分 为 2D 泻 染 和 3D 
泻 染 。 
1. 2D 泻 染 


绝 大 多 数 的 CSS 属性 都 属于 2D 泻 染 。 由 于 在 CSS 3 中 加 入 大 量 的 有 用 的 2D 泻 染 的 属性 ， 
以 前 需要 使 用 图 片 才 能 实现 的 效果 现在 通过 CSS 的 设置 也 可 以 实现 。 下 面 主要 说 明 比 较 常 用 的 
属性 以 及 使 用 注意 点 。 


@ border-radius 圆 角 类 型 。 





这 是 一 个 非常 常用 的 CSS 类 型 ， 几 乎 在 所 有 的 项 目 多 多 少 少 都 会 用 到 ， 过 去 实现 圆 角 是 一 
件 很 费劲 的 事情 ， 如 今 CSS 3 带 来 的 属性 可 以 很 好 地 解决 圆 角 问题 。 不 过 在 实际 使 用 圆 角 的 时 
候 需 要 注意 ， 在 ios 上 面 实现 得 比较 完美 。 在 Android 上 ， 很 多 机 型 对 于 圆 角 的 泻 染 处 理 并 没有 
达到 一 个 理想 的 状态 ， 特 别 是 处 理 圆 角 和 直线 的 连接 ， 在 圆 角 的 半径 设置 比较 小 (1~3 像素 ) 的 
时 候 不 是 很 明显 。 不 过 当 超 过 4 像素 的 时 候 ， 在 部 分 机 型 上 就 会 出 现 明显 的 圆 角 的 边缘 和 直接 差 
半 个 像素 的 问题 。 半 径 超大 (大 于 10px) 的 时 候 ， 圆 角 会 有 非常 明显 的 锯齿 。 因 此 对 于 大 半径 
的 圆 角 ， 不 推荐 使 用 border-radius， 建 议 使 用 border-image 来 实现 。 


@ box-shadow 盒 模型 阴影 





此 属性 使 用 一 般 不 会 有 太 大 问题 ， 至 今 还 没有 发 现 非常 大 的 问题 ， 可 以 比较 放心 地 使 用 。 
不 过 有 些 Android 低 端 低 版 本 机 不 支持 box-shadow， 这 个 需要 注意 一 下 。 不 过 问题 不 大 ， 因 为 大 
部 分 盒 阴影 不 会 特别 明显 ， 用 户 一 般 不 会 特别 注意 。 


@ text-shadow 文字 阴影 

在 手机 Web 上 基本 都 支持 文字 阴影 ， 可 以 使 用 。 不 过 有 一 点 需要 注意 ， 在 Android 2.3 以 及 
之 前 的 版 本 ， 在 blur radious 为 0 的 时 候 ， 文 字 阴 影 会 失效 。 

@ linear-gradient 线性 渐变 

线性 渐变 本 身 不 是 CSS 的 属性 ， 而 是 属性 下 面 的 数值 ， 一 般 用 在 background 的 属性 里 比较 


多 ， 使 用 线性 渐变 需要 注意 ， 有 很 多 种 线性 渐变 的 表达 方式 ， 对 于 不 同 的 手机 、 版 本 也 会 有 所 不 
同 。 在 手机 Web 上 面 ， 使 用 下 面 这 种 格式 比较 安全 : 


-webkit-gradient (linear, left top, left bottom, from(), to()) 





@ border-image 边框 图 像 


在 日 常 的 使 用 中 ，borderimage 是 一 个 相当 实用 的 属性 ， 主 要 用 途 是 进行 图 片 的 拉 伸 ， 具 体 
的 使 用 方法 可 以 在 网 上 自行 搜索 一 下 。 估 计 里 面 会 有 这 样 一 个 问题 ， 就 是 一 个 图 片 被 拉 伸 到 一 定 
宽度 之 后 四 个 角 的 图 片 那里 会 有 变形 。 这 个 是 在 部 分 Android 机 上 发 现 的 。 此 类 机 型 不 是 很 多 ， 
不 过 还 是 需要 注意 。 


205 


构建 移动 网 站 与 APP: HTML 5 移动 开发 入 门 与 实战 





2. 3D 泻 染 


3D 泻 染 是 非常 有 用 和 酷 炫 的 ， 能 将 页 面 上 的 元 素 进行 3D 泻 染 ， 实 现 各 种 非常 炫 酷 的 效 
果 。 不 过 由 于 其 非常 先进 ， 所 以 能 支持 3D 属性 的 机 型 、 版 本 、 厂 商 也 会 有 很 多 的 不 同 。 因 此 这 
里 说 3D 并 不 是 要 使 用 3D 里 面 的 属性 ， 而 是 使 用 其 特性 。 

从 实践 的 角度 来 看 ，3D 的 最 大 的 好 处 是 使 用 了 硬件 加 速 功能 ， 虽 然 直接 使 用 它 的 各 种 属性 
有 困难 ， 但 是 提供 了 很 多 硬件 加 速 特性 支持 。 因 此 在 做 页 面 动 画 的 时 候 ， 即 使 不 是 做 3D 的 变 
化 ， 也 可 以 通过 3D 的 设置 开启 硬件 加 速 功能 。 例 如 ， 使 用 translateZ(0) 既 可 以 使 当前 的 节点 开 
启 硬件 加 速 功 能 ， 又 不 会 带 来 任何 的 泻 染 变化 。 需 要 注意 的 是 ， 必 须 使 用 3D 才 会 开启 硬件 
加 速 。 

接 下 来 我 们 讨论 动画 优化 方面 的 问题 。 

动画 是 CSS 3 中 一 个 比较 有 用 的 、 可 以 实现 节点 的 动画 效果 ， 配 合 JavaScript， 可 以 让 动画 
变 得 非常 丰富 。 不 过 在 如 何 正 确 使 用 动画 上 需要 处 处 小 心 ， 最 关键 的 是 性 能 问题 。 

有 很 多 在 PC 上 没有 的 性 能 问题 属性 一 旦 到 了 手机 上 就 会 变 得 非常 明显 ， 其 中 使 用 动画 就 常 
常会 遇 到 这 种 问题 。 网 页 的 DOM 特性 使 动画 非常 耗 能 ， 再 加 上 网 页 是 单 进程 单线 程 的 ， 因 此 所 
有 的 程序 运行 都 会 在 一 个 线程 里 运行 。 手 机 上 的 性 能 还 没有 达到 PC 上 的 性 能 ， 因 此 动画 的 性 能 
问题 在 手机 上 显得 异常 突出。 如 果 要 彻底 提高 性 能 ， 现 在 一 个 可 能 的 方案 是 使 用 webworker， 建 
立 多 线程 的 方式 。 不 过 支持 webworker 的 手机 并 不 是 很 多 。 


@ ”动画 触发 的 reflow 要 尽 可 能 小 。 

@ ”动画 尽 可 能 使 用 absolute 的 方式 。 

@ “动画 的 区 域 尽 可 能 小 ， 并 且 里 面 的 结构 要 简单 。 

@ ”文字 的 动画 性 能 消耗 较 小 ， 图 片 次 之 ， 复 杂 结 构 最 耗 性 能 。 
全 

@ 

全 








由 于 各 种 浏览 器 的 实现 差异 很 大 ， 因 此 不 推荐 使 用 3D 动画 。 

不 推荐 整个 页 面 的 动画 ， 例 如 模拟 Native 的 整 页 切换 效果 。 

动画 尽 可 能 使 用 CSS 实现 ， 如 果 必 须 使 用 JavaScript 实现 ， 推 荐 使 用 requestAnimation 
Frame 的 方式 代替 setTimeout。 

针对 动画 的 节点 开局 硬件 加 速 translateZ(0)。 

@ ”动画 的 时 间 不 宜 过 长 (尽量 控制 在 S00ms~1s ) ， 动 画 时 间 越 长 ， 性 能 问题 越 明显 。 


在 使 用 2D 动画 时 ， 主 要 会 使 用 transition 和 animation 两 个 属性 。 

transition 属性 在 手机 Web 的 各 个 平台 上 支持 得 比较 好 ， 不 过 需要 加 上 webkit 的 前 缀 ， 以 保 
证 在 老 机 型 上 没有 兼容 性 问题 。transition 可 以 进行 动画 变化 的 CSS 属性 比较 多 ， 比 如 width、 
height、color、background 等 。 不 过 在 使 用 transition 时 ， 需 要 注意 的 是 对 width 和 height 的 设 
置 。 如 果 设 置 成 auto， 动 画 变化 就 会 比较 诡异 ， 建 议 动画 起 始 都 是 具体 的 像素 或 者 百分比 。 如 果 
background 变化 的 是 图 片 ， 切 换 效果 就 不 会 很 理想 。 避 免 对 不 同 的 图 片 进行 变化 ， 不 过 可 以 考虑 
使 用 background position 进行 位 置 的 变化 。 

animation 属性 的 手机 浏览 器 基本 都 兼容 ， 不 过 需要 在 低 版 本 上 加 上 -webkit 前 级 ，animation 
适合 用 在 需要 重复 触发 的 动画 上 面 。 
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从 实践 的 角度 来 看 ，transition 和 animation 使 用 的 场景 不 太一 样 ，transition 适合 用 在 短 而 小 
的 动画 上 面 ，animation 适合 用 在 会 不 断 重 复 的 场景 里 。 

尽量 使 用 CSS 3 动画 ， 不 仅 可 以 不 占用 JavaScript 主线 程 ， 还 可 以 利用 硬件 加 速 。 不 过 ， 
CSS 3 动画 也 有 缺点 ， 即 不 支持 中 间 状 态 的 监听 。 因 此 ， 可 以 适当 使 用 Canvas 动画 。Canvas 可 
以 规避 泻 染 树 的 计算 ， 泻 染 性 能 更 佳 ， 但 其 缺点 是 开发 成 本 较 高 ， 维 护 较为 复杂 。 因 此 ， 较 为 简 
单 、 易 于 处 理 的 局 部 动画 建议 采用 CSS 3 动画 ， 较 为 复杂 、 涉 及 较 多 DOM 元 素 的 建议 使 用 
Canvas 动画 。 

在 使 用 JavaScript 实现 动画 时 ， 建 议 合理 使 用 requestAnimationFrame。 其 优点 是 能 解决 脚本 
问题 引起 的 卡 顿 问题 ， 并 且 支 持 中 间 状 态 的 监听 。 其 缺点 是 存在 兼容 性 问题 ， 目 前 
requestAnimationFrame 的 浏览 器 的 支持 情况 如 图 9.48 所 示 ， 可 参考 http://caniuse.com/#search= 
requestAnimationFrame 。 


lossaan" OperaMn” 人 ro * Chromafor 





图 9.48 requestAnimationFrame 浏览 器 兼容 情况 


9.5.4 ”高 频 事 件 优化 


在 页 面 开发 时 ， 通 常会 在 需要 用 户 交 互 参与 的 地 方 添加 事件 ， 而 这 种 事件 往往 会 被 频繁 触 
发 。 例 如 ，touchmove、scroll 事件 可 导致 多 次 渔 染 。 试 想 窗口 的 resize 事件 或 一 个 元 素 的 
onmouseover 事件 在 触发 时 执行 得 非常 迅速 ， 并 且 被 连续 多 次 触发 ， 如 果 此 时 该 事件 的 回调 过 
重 ， 那 么 页 面 性 能 该 是 如 何 的 卡 顿 。 

一 种 处 理 方法 是 ， 增 加 响应 变化 的 时 间 间 隔 ， 减 少 重 绘 次 数 。 简 单 地 说 ， 就 是 限制 一 个 方法 
在 一 定时 间 内 执行 的 次 数 。 下 面 给 出 一 个 高 频 事 件 的 简单 处 理 示例 。 


【代码 9-6】 
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针对 这 种 执行 次 数 的 限制 ， 可 以 封装 一 下 高 频 事件 的 节 流 函数 ， 例 如 : 





调用 节 流 函数 ， 限 制 窗口 resize 操作 : 





从 节 流 函数 可 以 看 出 ， 通 常 其 实现 都 是 使 用 setTimeout 或 setInterval 定时 器 函数 实现 的 。 而 
现在 浏览 器 厂商 提供 了 一 个 统一 帧 管理 、 提 供 监 听 帧 的 API， 即 requestAnimationFrame。 但 是 这 
只 是 一 个 基础 API， 即 不 基于 DOM 元 素 的 style 变化 ， 也 不 基于 canvas 和 WebGL。 所 以 ， 有 具体 
的 细节 需要 开发 者 自行 完成 处 理 过 程 。 因 此 ， 可 以 使 用 requestAnimationFrame 监听 帧 变化 ， 使 
得 在 正确 的 时 间 进行 泻 染 。 

requestAnimationFrame 会 考虑 页 面 是 否 可 见 以 及 显示 器 的 刷新 频率 ， 以 确定 分 配给 动画 每 秒 
多 少 帧 。 对 于 同时 进行 的 个 动画 ， 浏 览 器 能 够 进行 优化 ， 把 原本 需要 NN 次 reflow 和 repaint 优 
化 成 1 次 ， 实 现 高 质量 的 动画 。requestAnimationFrame 的 原理 与 setTimeout 和 setInterval 类 似 ， 
通过 递归 调用 同一 方法 来 不 断 更 新 画面 以 达到 动画 效果 ， 优 于 setTimeout 和 setInterval 的 地 方 在 
于 它 是 由 浏览 器 专门 为 动画 提供 优化 实现 的 API， 并 且 充 分 利用 显示 器 的 刷新 机 制 ， 比 较 节 省 系 
统 资源 。 显 示 器 有 固定 的 刷新 频率 〈60Hz 或 75Hz)， 也 就 是 说 ， 每 秒 最 多 只 能 重 绘 60 次 或 75 
次 ，requestAnimationFrame 的 基本 思想 就 是 与 这 个 刷新 频率 保持 同步 ， 利 用 这 个 刷新 频率 进行 页 
面 重 绘 。 此 外 ， 使 用 这 个 API， 一 旦 页 面 不 处 于 浏览 器 的 当前 标签 ， 就 会 自动 停止 刷新 。 这 就 节 
省 了 CPU、GPU 和 电力 。requestAnimationFrame 的 语法 如 下 : 
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requestAnimationFrame 动画 的 实现 原理 与 setTimeout 类 似 ， 都 是 使 用 一 个 回调 函数 作为 参 
数 ， 并 且 这 个 回调 函数 会 在 浏览 器 重 绘 之 前 调用 。 例 如 : 


TequestAnimationFrame 是 HTML 5 新 定义 的 API， 旧 版 本 的 浏览 器 并 不 兼容 ， 而 且 浏 览 器 的 
实现 方式 不 一 ， 所 以 要 考虑 兼容 性 问题 。 常 用 的 兼容 性 写法 如 下 : 
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上 面 的 兼容 性 代码 有 两 个 作用 ， 一 是 统一 各 浏览 器 前 级 ， 二 是 在 浏览 器 没有 
requestAnimationFrame 方法 时 指向 setTimeout 方法 。 


TequestAnimationFrame 是 在 主线 程 上 完成 的 。 这 意味 着 ， 如 果 主 线程 非常 繁忙 ， 
TequestAnimationFrame 的 动画 效果 就 会 大 打折 扣 。 





9.5.5 GPU 加 速 


与 CPU 不 同 的 是 ，GPU (Graphic Processing Unit， 图 形 处 理 器 ) 是 专门 为 处 理 图 形 任务 而 
产生 的 芯片 。 从 这 个 任务 角度 来 说 ， 在 计算 机 的 显卡 以 及 手机 、 游 戏 机 等 各 种 有 多 媒体 处 理 需 求 
的 地 方 都 可 以 见 到 GPU 的 身影 。 在 Chrome 地 址 栏 中 输入 “chrome://flags/” 并 按 回 车 ， 即 可 查 
看 GPU 的 相关 项 目 。 

Chrome、FireFox、Safari、IE 9+ 和 最 新 版 本 的 Opera 都 支持 硬件 加 速 ， 当 它们 检测 到 页 面 中 
某 个 DOM 元 素 应 用 了 某 些 CSS 规则 时 就 会 开启 ， 最 显著 的 特征 是 元 素 的 3D 变换。 在 大 多 数 浏 
览 器 中 ， 如 果 识 别 到 页 面 里 使 用 了 z 轴 旋 转 translateZ)， 即 使 旋转 角度 为 0， 也 会 开启 GPU 加 
速 ， 所 以 我 们 可 以 利用 这 一 点 来 对 页 面 元 素 进行 0 度 Z 轴 旋 转 来 触发 浏览 器 开启 GPU 加 速 。 例 
如 : 





CSS 中 的 其 他 属性 (如 transitions、3D transforms、Opacity、Canvas、WebGL、Video) 也 能 
触发 GPU 演 染 ， 请 合理 使 用 。GPU 加 速 大 幅 减 少 了 合成 /绘制 时 间 ， 大 大 提高 了 页 面 速度 。 
GPU 加 速 也 有 自己 的 缺点 : 过 多 的 GPU 层 会 带 来 性 能 开销 ， 主 要 原因 是 使 用 GPU 加 速 其 实 是 
利用 GPU 层 的 缓存 让 泻 染 资 源 可 以 重复 使 用 ， 一 旦 层 多 了 、 缓 存 增 大 ， 就 会 引起 其 他 性 能 问 
题 。 过 渡 使 用 会 引发 手机 耗 电 增加 。 
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口 .6 脚本 优化 


使 用 JavaScript 构建 交互 丰富 的 Web 应 用 时 ，JavaScript 代码 也 可 能 带 来 一 定 的 性 能 问题 ， 
可 能 是 造成 页 面 速度 变 慢 的 主要 原因 。 为 了 在 开发 过 程 中 消除 JavaScript 性 能 瓶颈 ， 本 节 主 要 从 
以 下 几 个 方面 介绍 脚本 优化 。 


@ ”脚本 执行 优化 。 

条 件 JavaScript。 
缓存 DOM 操作 。 
尽量 使 用 事件 代理 。 
尽量 使 用 ID 选择 器 。 
Click 事件 优化 。 


9.6.1 脚本 执行 优化 


在 Web 开发 中 ， 我 们 常常 需要 多 问 几 次 是 否 可 以 让 代码 更 高 效 一 些 。 浏 览 器 具备 越 来 越 多 
的 特性 ， 并 且 逐 渐 向 移动 设备 转移 ， 也 要 求 我 们 的 代码 更 加 紧凑 。 如 何 优化 脚本 执行 就 变 得 越 来 
越 重 要 了 。 有 许多 简单 的 策略 和 代码 可 以 保证 相对 理想 的 前 端 性 能 。 

无 论 当前 JavaScript 代码 是 在 内 嵌 还 是 外 链 文 件 中 ， 页 面 的 下 载 和 泻 染 都 必须 停 下 来 等 待 肢 
本 执行 完成 。JavaScript 执行 过 程 耗 时 越久 ， 浏 览 器 等 待 响应 用 户 输入 的 时 间 就 越 长 。 浏 览 器 在 
下 载 和 执行 脚本 时 出 现 阻塞 。 大 多 数 浏览 器 都 是 用 单一 进程 来 处 理 用 户 界 面 CUI) 更 新 和 
JavaScript 脚本 执行 ， 所 以 同一 时 刻 只 能 做 其 中 一 件 事 。 因 为 不 知道 JavaScript 是 否 会 向 HTML 
中 添加 或 修改 元 素 ， 所 以 在 下 载 和 执行 JavaScript 的 时 候 都 会 阻塞 页 面 的 下 载 和 泻 染 ， 等 
JavaScript 全 部 下 载 和 执行 完毕 之 后 再 解析 和 泻 染 页 面 。 而 在 浏览 器 解析 到 <body> 标 签 之 前 ， 不 
会 泻 染 页 面 的 任何 部 分 。 所 以 如 果 JavaScript 的 下 载 和 执行 时 间 过 长 ， 而 且 被 放 在 页 面 项 部 ， 就 
会 导致 明显 的 延迟 。 虽然 现 代 浏 览 器 可 以 并 行 下 载 JavaScript， 但 是 JavaScript 下 载 仍然 会 阻塞 
其 他 资源 的 下 载 。 因 此 推荐 将 所 有 <scripf> 标 签 尽 可 能 放 到 <body> 标 签 的 底部 ， 以 尽量 减少 对 整 
个 页 面 下 载 的 影响 。 例 如 : 
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脚本 处 理 不 当 会 阻塞 页 面 加载 、 泻 染 ， 因 此 在 使 用 时 需要 将 CSS 写 在 头 部 、 将 JavaScript 写 
在 尾部 或 异步 。 

由 于 每 个 <scripfe> 标 签 初始 下 载 时 都 会 阻塞 页 面 泻 染 ， 因 此 减少 页 面包 含 的 <script> 标 签 数量 
有 助 于 改善 这 一 情况 。 这 不 只 针对 外 链 肢 本， 内 嵌 脚 本 的 数量 同样 也 要 限制 。 浏 览 器 在 解析 
HTML 页 面 的 过 程 中 每 遇 到 一 个 <script> 标 签 ， 都 会 因 执行 脚本 而 导致 一 定 的 延 时 ， 因 此 最 小 化 
延迟 时 间 将 会 明显 改善 页 面 的 总 体 性 能 。 这 个 问题 在 处 理 外 链 JavaScript 文件 时 略 有 不 同 。 考 虑 
到 HTTP 请 求 会 带 来 额外 的 性 能 开销 ， 因 此 下 载 单 个 100KB 的 文件 将 比 下 载 5 个 20KB 的 文件 
更 快 。 也 就 是 说 ， 减 少 页 面 中 外 链 脚 本 的 数量 将 会 改善 性 能 ， 所 以 要 尽量 合并 和 压缩 
JavaScript。 

在 前 面 我 们 介绍 过 无 阻塞 加 载 ， 采 用 扩展 属性 defer 或 async 延迟 加 载 脚本 ， 减 少 JavaScript 
对 性 能 的 影响 。 此 外 ， 还 有 动态 创建 script 的 方法 ， 例 如 : 





9.6.2 条 件 JavaScript 


在 移动 Web 开发 中 ， 有 时 为 了 达到 业务 要 求 ， 常 常 需要 考虑 非常 精细 而 复杂 的 交互 方式 。 
最 适合 桌面 用 户 的 设计 并 不 一 定 适合 移动 用 户 。 同 理 ， 适 用 于 平板 电脑 的 设计 并 不 适合 手机 。 这 
就 是 需要 通过 添加 条 件 JavaScript 产生 完全 不 同 效果 的 原因 。 
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条 件 JavaScript 提供 了 在 特定 条 件 下 使 用 插件 、 功 能 和 方法 等 的 可 能 性 。 当 然 ， 有 时 类 似 的 
CSS 媒体 查询 方法 也 可 以 实现 。 例 如 : 


首先 需要 找到 浏览 器 窗口 的 大 小 ， 然 后 使 用 宽度 作为 判断 条 件 决定 使 用 的 宽度 。 如 果 屏 幕 大 
于 750px， 就 将 提示 用 户 他 们 使 用 的 是 宽屏 。 类 似 的 ，CSS 媒体 查询 使 用 浏览 器 过 滤 信 息 来 决定 
何 时 激活 一 组 特定 的 风格 。 


【代码 9-7】 
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【代码 解析 】 


代码 2~9 行 在 中 创建 了 8 个 变量 ， 这 些 变量 都 是 全 局 变量 ， 可 在 本 段 代 码 的 其 他 函数 内 部 
使 用 。 在 11~48 行 代码 中 定义 的 函数 将 在 检测 到 屏幕 大 小 发 生变 化 时 被 触发 。 一 些 函 数 在 
logistics() 方 法 内 部 调用 。 第 50 行 代码 在 页 面 加 载 完 成 时 立即 执行 ， 调 用 logistics() 方 法 ， 定 义 屏 
幕 宽度 和 可 用 变量 。 在 第 27 行 代码 中 定义 了 宽度 变量 cw， 并 在 第 28、33、38 行 中 与 全 局 变量 
limitSsm、limitMd、limitLg 进行 对 比 。 如 果 条 件 判断 通过 ， 就 触发 让 语句 中 包含 的 函数 调用 。 例 
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如 ， 变 量 cw 取 值 为 360， 将 符合 第 28 行 的 条 件 判断 ， 并 且 loadedSm 取 值 为 false， 第 30、31 
行 代码 将 被 执行 。 第 30 行 代码 调用 loadSm() 方 法 ，( 方 法 在 第 11~13 行 中 定义 的 )。 在 第 12 行 中 
可 以 看 到 consolelog0 语 句 ， 用 于 在 浏览 器 控制 台 打 印 出 消息 。cw 取 值 不 同 ， 调 用 方法 也 将 不 
同 ， 可 根据 这 一 点 在 页 面 上 执行 不 同 的 定制 化 代码 。 如 果 将 console.log0 语 句 改 为 alert() 方 法 ， 
将 会 在 页 面 中 弹出 对 话 框 。 图 9.49 中 展示 了 不 同 屏幕 大 小 和 不 同 设备 下 展示 的 不 同 对 话 框 。 





You might need to reload the page for proper user agent spcofing and vie... Nev 


屏幕 宽度 检测 屏幕 宽度 检测 


相交 明了 本 上 ， 漳 下 的 后 


在 不 同 昌 朗 的 习 于 上 ， 漳 出 不 同 的 提示 村 


com 显示 
四 |] := 
条 止 此 页 再 显示 对 话 杠 ， 








屏幕 宽度 检测 


在 不 同 宽度 的 屏幕 上 ， 弹 出 不 同 的 提示 框 


com 县 条 ycom 明示 
© = 
锯 止 比 页 再 明示 对 也 下 - 茜 止 此 再 再 县 示 对 话 框 。 


D3 





图 9.49 不 同 设备 不 同 尺寸 的 屏幕 上 呈现 了 不 同 的 消息 提示 


9.6.3 缓存 DOM 操作 


在 浏览 器 里 ， DOM (Document Object Model) 只 是 一 些 操作 HTML 或 XML 元 素 的 接口 集 
合 ， 为 了 让 其 他 语言 也 能 通过 这 些 接口 来 操作 文档 ， 浏 览 器 的 DOM 部 分 和 ECMAScript 部 分 是 
分 开 的 。 也 就 是 说 ，DOM 与 ECMAScript 是 相对 独立 的 两 个 部 分 ， 若 需要 操作 HTML， 则 要 使 
3 DOM 提供 的 接口 来 连接 HTML 文档 ， 所 以 使 用 ECMAScript 对 DOM 进行 操作 时 都 需要 经 过 
-个 连接 接口 进行 调用 的 过 程 。 这 个 过 程 具 有 很 大 的 性 能 损耗 。 操 作 DOM 的 次 数 越 多 ， 对 性 能 
的 影响 就 越 大 ， 从 而 表现 出 DOM 操作 特别 损耗 性 能 的 现象 。 因 此 ， 需 要 考虑 缓存 DOM 的 选择 
与 计算 等 操作 。 

既然 DOM 操作 如 此 损耗 性 能 ， 就 需要 在 开发 中 尽量 减少 DOM 操作 。 减 少 DOM 操作 的 根 
本 其 实 就 是 减少 重 绘 或 者 重 排 的 次 数 。 当 我 们 需要 批量 操作 DOM 的 时 候 ， 可 以 先 把 目标 节点 隐 
藏 起 来 再 进行 操作 ， 操 作 完 成 之 后 再 把 节点 还 原 ， 也 可 以 利用 document.createDocumentFragment 
方法 先生 成 一 个 完整 的 文档 片段 ， 完 成 之 后 再 一 次 性 插入 HTML 文档 中 ， 这 样 就 避免 了 浏览 器 
在 每 一 次 DOM 操作 后 都 进行 一 次 重 排 和 重 绘 操 作 。 同 样 的 ， 把 目标 节点 脱离 文档 流 也 能 达到 类 
似 的 效果 。 有 些 时 候 一 些 网 页 特效 并 不 允许 我 们 把 它 隐藏 起 来 执行 ， 例 如 JavaScript 动画 ， 但 是 
JavaScript 动画 确实 极其 耗费 性 能 ， 每 一 帧 的 变换 都 需要 经 过 重 排 或 者 重 绘 操作 ， 无 形 之 中 给 网 























215 


构建 移动 网 站 与 APP: HTML 5 移动 开发 入 门 与 实战 





页 带 来 了 极 大 的 性 能 开销 。 利 用 脱离 文档 流 的 方式 可 以 使 动画 执行 时 只 影响 自身 的 重 绘 与 重 排 ， 
而 不 会 影响 其 他 元 素 。 常 见 的 脱离 文档 流 方式 就 是 绝对 定位 。 利 用 绝对 定位 使 元 素 脱离 文档 流 ， 
等 执行 完 动画 之 后 再 插入 文档 流 ， 这 时 进行 的 重 排 重 绘 操作 只 发 生 在 执行 动画 的 元 素 本 身 ， 从 而 
提升 了 性 能 。 

尽 可 能 地 减少 DOM 的 访问 次 数 ， 例 如 : 





在 循环 体内 每 一 次 都 访问 了 DOM， 可 以 对 比 进行 如 下 优化 : 





浏览 器 提供 了 一 个 名 为 querySelectorAll0) 的 原生 DOM 方法 ， 这 种 方法 自然 要 比 使 用 
JavaScript 和 DOM 来 遍历 查找 元 素 快 得 多 。 

浏览 器 下 载 完 页 面 后 便 开 始 解析 页 面 并 生成 两 个 内 部 数据 结构 : DOM 树 和 泻 染 树 。DOM 
树 用 来 表示 页 面 的 结构 ， 泻 染 树 用 来 表示 DOM 节点 如 何 显示 。 一 旦 这 两 个 数据 结构 构建 完成 ， 
浏览 器 就 会 开始 绘制 页 面 元 素 。DOM 树 里 的 每 一 个 节点 在 渔 染 树 里 都 至 少 有 一 个 节点 与 之 对 
应 。 在 泻 染 树 里 ， 它 把 所 有 节点 都 看 作 是 一 个 有 内 外 边 距 和 位 置 属性 的 盒子 。 当 节点 的 几何 属性 
(如 宽 高 、 位 置 ) 被 更 改 之 后 ， 浏 览 器 会 重新 计算 这 些 更 改 的 属性 ， 然 后 使 泻 染 树 中 对 应 的 部 分 
失效 ， 并 且 重 新 构造 演 染 树 ， 这 个 过 程 被 称 为 “ 重 排 ”。 完 成 重 排 过 程 后 ， 浏 览 器 会 重新 绘制 那 
些 受 影响 的 部 分 ， 这 个 过 程 称 为 “ 重 绘 "。 有 些 DOM 操作 并 不 会 导致 重 排 ， 只 会 导致 重 绘 ， 例 
如 更 改 背 景 颜 色 。 重 排 与 重 绘 往往 不 是 发 生 在 单独 一 个 元 素 上 。 在 文档 流 里 ， 一 个 元 素 的 几何 属 
性 改变 有 可 能 会 导致 整个 页 面 的 重 排 或 者 重 绘 操作 ， 例 如 在 body 最 上 方 插入 一 个 子 元 素 ， 这 时 
其 后 所 有 被 这 个 元 素 影响 到 的 子 元 素 都 要 跟着 重新 计算 、 重 新 泻 染 。 重 排 跟 重 绘 都 是 代价 昂贵 的 
操作 ， 这 也 是 DOM 表现 出 特别 损耗 性 能 的 一 个 重要 原因 。 

大 多 数 浏览 器 通过 队列 化 修改 和 批量 执行 来 优化 重 排 过 程 ， 但 获取 布局 信息 会 导致 泻 染 队列 
刷新 。 例 如 ，offsetTop/LefyVWidth/Height、scrollTop/LefyWidth/Height、clientTop/LefyWidth/Height、 
getComputedStyle0 (currentStyle in IE) 就 需要 返回 最 新 的 布局 信息 ， 所 以 不 要 在 布局 信息 改变 
时 查询 这 些 内 容 。 同 时 可 以 用 局 部 变量 缓存 布局 信息 (缓存 的 是 值 而 不 是 引用 时 才 有 作用 )。 例 
如 ， 下 列 方法 就 会 返回 一 个 集合 : 
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® document.getElementByName() 
® document.getElementByClassName() 
® document.getElementByTagName() 


下 列 属性 也 同样 返回 HTML 集合 : 


® document.images 

® document.links 

@ document.forms 

® document.forms[0].elements 


一 般 来 说 ， 需 要 多 次 访问 同一 个 DOM 属性 或 方法 时 最 好 把 一 个 局 部 变量 缓存 为 此 成 员 。 当 
遍历 一 个 集合 时 ， 首 先 优化 原则 是 把 集合 存储 在 局 部 变量 中 ， 并 把 length 缓存 在 循环 外 部 ， 然 后 
使 用 局 部 变量 访问 这 些 需要 多 次 访问 的 元 素 。 例 如 : 


【代码 9-8】 
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同 理 ， 为 了 减少 发 生 数 次 重 排 和 重 绘 ， 应 当 合 并 DOM 和 样式 的 修改 ， 然 后 一 次 性 处 理 。 例 


优化 后 的 代码 如 下 : 


还 可 以 通过 缓存 布局 信息 的 方法 : 尽量 减少 布局 信息 的 获取 次 数 ， 获 取 后 赋值 给 局 部 变 
量 ， 之 后 再 操作 局 部 变量 。 例 如 : 
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通常 浏览 器 都 会 使 用 增 量 reflow 的 方式 将 需要 reflow 的 操作 积累 到 一 定 程度 ， 然 后 再 一 起 
触发 ， 但 是 如 果 脚 本 中 要 获取 以 下 属性 ， 那 么 积累 的 reflow 将 会 马上 执行 ， 以 得 到 准确 的 位 置 
信息 : 


offsetLett 

offsetTop 

offsetHeight 

offsetWidth 

scrollTop/Left/ Width/Height 
clientTop/Left/Width/Height 
getComputedStyle() 


因此 请 尽 可 能 地 减少 使 用 元 素 位 置 操作 ， 尽 量 减 少 布局 信息 的 获取 次 数 。 


9.6.4 尽量 使 用 事件 代理 以 避免 批量 绑 定 事件 


经 常 需要 对 页 面 上 大 量具 有 某 种 共性 的 节点 绑 定 同样 的 一 个 事件 处 理 器 ， 传 统 的 方式 是 将 这 
些 节点 获取 为 一 个 对 象 集合 ， 然 后 对 每 个 集合 绑 定 一 次 事件 。 当 存在 多 个 元 素 需要 注册 事件 时 ， 
在 每 个 元 素 上 绑 定 事件 本 身 就 会 对 性 能 有 一 定 损耗 。 很 显然 ， 当 集合 只 有 两 三 个 元 素 的 时 候 ， 我 
们 这 样 做 是 无 所 谓 的 。 但 当 数 量 达到 几 十 甚至 几 百 的 时 候 ， 使 用 这 种 遍历 对 象 集 依次 进行 绑 定 的 
方式 对 页 面 性 能 损耗 是 很 大 的 。 

因此 ， 利 用 事件 委托 来 增强 事件 批量 绑 定 的 效率 。DOM Level2 事件 模型 中 所 有 事件 默认 会 
传播 到 上 层 文档 对 象 ， 可 以 借助 这 个 机 制 在 上 层 元 素 注册 一 个 统一 事件 对 不 同 子 元 素 进行 相应 处 
理 。 例如， 如 下 HTML 结构 : 
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除了 给 每 个 i 元素 批 量 绑 定 事件 之 外 ， 可 考虑 如 下 处 理 方法 : 


对 事件 委托 方法 进行 封装 ， 例 如 : 
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事件 委托 利用 了 事件 冒 泡 ， 只 指定 一 个 事件 处 理 程序 就 可 以 管理 某 一 类 型 的 所 有 事件 。 使 用 
事件 委托 的 优点 是 document 对 象 很 快 就 可 以 访问 ， 而 且 可 以 在 页 面 生命 周期 的 任何 时 间 点 上 为 
它 添加 事件 处 理 程序 〈 无 需 等 待 DOMContentLoaded 或 load 事件 )。 换 名 话说 ， 只 要 可 点 击 的 元 
素 呈 现在 页 面 上 ， 就 可 以 立即 具备 适当 的 功能 。 而 且 ， 在 页 面 中 设置 事件 处 理 程序 所 需 的 时 间 更 
少 。 只 添加 一 个 事件 处 理 程序 所 需 的 Dom 引用 更 少 ， 所 花 的 时 间 也 更 少 ， 整 个 页 面 占用 的 内 存 
空间 更 少 ， 能 够 提升 整体 性 能 。 


9.6.5 ”尽量 使 用 ID 选择 器 


在 页 面 中 引入 一 些 JavaScript 代码 库 之 后 ， 利 用 class 属性 来 选择 DOM 元 素 变 得 相当 简单 。 
尽管 如 此 ， 还 是 推荐 大 家 尽量 少 用 class 选择 器 ， 而 尽量 多 使 用 运行 更 快 的 ID 选择 器 (IE 浏览 
器 下 使 用 class 选择 器 会 在 遍历 整个 DOM 树 之 后 返回 相符 的 class 包装 集 )。 而 ID 选择 器 更 快 是 
因为 DOM 本 身 就 有 getElementById 这 个 方法 ， 而 没有 对 应 的 获取 class 包装 集 的 方法 。 所 以 如 
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果 使 用 class 选择 器 ， 浏 览 器 就 会 遍历 整个 DOM， 如 果 网 页 DOM 结构 足够 复杂 ， 众 多 的 class 
选择 器 会 使 得 页 面 越 来 越 慢 。 例 如 下 面 这 段 简单 的 HTML 代码 : 





以 jQuery 库 为 例 ， 使 用 class 选择 器 获取 提交 按钮 : 





一 个 简单 的 获取 class 对 象 的 原生 实现 如 下 : 





从 以 上 实现 可 以 看 出 每 次 使 用 class 选择 器 均 遍 历 整个 DOM 树 ， 对 性 能 损耗 非常 明显 。 因 
此 ， 直 接 使 用 ID 选择 器 是 最 快 的 。 


第 9 章 HTML 5 移动 性 能 优化 





9.6.6 click 事件 优化 


不 管 在 移动 端 还 是 PC 端 ， 我 们 都 需要 处 理 点 击 这 个 最 常用 的 事件 。 但 在 touch 端 click 事件 
响应 速度 会 比较 慢 ， 在 较 老 的 手机 设备 上 会 更 为 明显 ， 这 是 因为 click 事件 有 300ms 的 延迟 。 为 
了 解决 这 个 问题 ， 诞 生 了 一 些 fastclick 的 解决 方案 (例如 Zepto 的 touch 模块 )， 帮 助 我 们 实现 了 
很 多 手机 上 的 事件 ， 比 如 tap 等 。tap 事件 是 为 了 解决 click 的 延迟 问题 。 

触摸 事件 〈touch) 会 在 用 户 手指 放 在 屏幕 上 面 的 时 候 、 在 屏幕 上 滑动 的 时 候 或 者 是 从 屏幕 
上 移 开 的 时 候 出 发 。 下 面 是 具体 说 明 : 


@ touchstart 事件 : 当 手 指 触摸 屏幕 时 触发 ， 即 使 已 经 有 一 个 手指 放 在 屏幕 上 也 会 触发 。 

@ touchmove 事件 : 当 手 指 在 屏幕 上 滑动 的 时 候 连续 触发 。 在 这 个 事件 发 生 期 间 ， 调 用 
preventDefault() 事 件 可 以 阻止 滚动 。 

@ touchend 事件 : 当 手 指 从 屏幕 上 离开 的 时 候 触 发 。 

@ touchcancel 事件 : 当 系 统 停止 跟踪 触摸 的 时 候 触发 。 


例如 ， 有 如 下 代码 : 


【代码 9-9】 
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在 控制 台中 显示 如 图 9.50 所 示 的 效果 。 


RO Hements Console Sources 


© 可 <topframe> MM 
touchstart:1457577872467 
touchmove:1457577872578 
‘touchmove: 1457577872587 
touchmove:1457577872665 
touchmove:1457577872622 
‘touchmove: 1457577872639 
touchmove: 1457577872657 
‘touchmove: 1457577872676 
touchmove:1457577872694 
touchmove:1457577872769 
touchmove: 1457577872727 
touchmove:1457577872743 
touchmove:1457577872759 
touchmove:1457577872777 
touchmove:1457577872795 
touchmove:1457577872869 
touchmove:1457577872827 
‘touchmove: 1457577872843 
touchmove;1457577872861 
touchmove;1457577972879 
touchmove:1457577872894 
touchmove:1457577972911 
touchmove:1457577972963 
touchmove:1457577973918 
touchmove:1457577973935 
touchmove:1457577973852 
touchmove;1457577973869 
‘touchmove; 1457577073886 
touchmove: 1457577073103 
touchmove; 1457577073120 
touchmove;1457577873138 
touchmove:1457577873154 
‘touchmove: 1457577873171 
touchmove: 1457577973188 
‘touchend: 1457577073281 


图 9.50 touch 事件 展示 


可 以 看 出 ， 移 动 的 时 候 ，touchstart 触发 时 机 早 于 touchmove，touchmove 早 于 touchend。 下 
面 看 看 Zepto 的 touch 模块 实现 : 
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touch 模块 绑 定 事 件 touchstart、touchmove 和 touchend 到 document 上 ， 然 后 通过 计算 touch 
事件 触发 的 时 间 差 、 位 置 差 来 实现 自 定义 tap 和 swipe 等 。 使 用 touchstart、touchend 代替 click， 
响应 速度 变 快 ， 但 应 注意 touch 响应 过 快 易 引 发 误 操作 。 

目前 touch 事件 的 兼容 性 如 图 9.51 所 示 ， 可 参考 http://caniuse.cony#search=touch。 


E Edge “Frefox Chrome 





图 9.51 touch 事件 兼容 性 


9 .7 本 章 小 结 


我 们 正在 跑步 进入 移动 互联 网 时 代 ， 所 以 移动 环境 下 的 资源 加 载 优化 非常 迫不及待 。 本 章 介 


绍 了 HTML 5 移动 页 面 中 的 一 些 优化 方法 ， 如 按 需 加 载 、 预 加 载 、 异 步 加 载 等 技巧 。 诸 多 方法 
在 实践 中 要 根据 具体 的 需求 场景 合理 优化 选择 。 
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本 章 介绍 目前 非常 流行 的 前 端 移动 框架 一 一 Query Mobile。 说 到 大 名 易 易 的 jQuery 框架 ， 
读者 一 定 很 熟悉 。 那 么 两 者 有 什么 关系 呢 ? jQuery Mobile 框架 是 以 jQuery 类 库 为 基础 而 开发 
的 ， 沿 用 了 jQuery 框架 的 语法 、 接 口 、 样 式 等 核心 内 容 ， 但 其 主要 专注 于 移动 方面 的 设计 。 套 
用 目前 比较 流行 的 说 法 ， 就 是 基于 jQuery Mobile 框架 开发 的 Web APP 看 起 来 更 像 Native APP。 

jQuery Mobile 是 专 为 移动 设备 应 用 开发 而 生 的 JavaScript 框架 ， 专 门 针 对 触 控 操作 进行 了 优 
化 设计 ， 可 适用 于 目前 所 有 流行 的 智能 手机 、 平 板 等 移动 终端 。jQuery Mobile 框架 设计 的 宗旨 
就 是 通过 使 用 较 少 的 HTML 5、CSS 3、JavaScript 和 Ajax 代码 来 达到 对 页 面 进行 高 效 布局 的 目 
的 ， 完 全 将 jQuery 框架 倡导 的 “ 写 得 更 少 、 做 得 更 多 ”理念 升华 到 一 个 全 新 的 高 度 。 可 以 讲 ， 
jQuery Mobile 框架 就 是 一 种 专用 于 开发 、 创 建 移动 Web APP 的 终极 利器 。 

本 章 会 向 读者 介绍 jQuery Mobile 框架 的 基本 特点 、 开 发 原理 与 使 用 方法 ， 同 时 还 配 有 具体 
案例 。 





初步 接触 jQuery Mobile 


本 节 我 们 先 初步 介绍 jQuery Mobile 框架 的 基本 概况 及 使 用 方法 ， 在 后 面 的 小 节 中 我 们 会 在 
此 基础 上 进行 更 深入 的 讲解 ， 以 帮助 读者 循序 渐进 地 掌握 jQuery Mobile 框架 的 特性 及 应 用 
方法 。 


10.1.1 jQuery Mobile 框架 特点 


目前 ， 基 于 jQuery 框架 而 衍生 出 的 前 端 框 架 非常 多 ， 但 是 能 达到 真正 意义 上 的 功能 升华 、 
易学 易 用 、 广 泛 认可 的 框架 屈指 可 数 ，jQuery Mobile 框架 可 以 算 其 中 之 一 。 可 以 讲 ，jQuery 
Mobile 是 基于 jQuery 类 库 开 发 出 的 最 优秀 的 前 端 框架 之 一 ， 是 专 为 移动 APP 设计 开发 而 生 的 。 

设计 人 员 基 于 jQuery Mobile 框架 可 以 开发 出 构建 在 iOS、Android、Blackberry 和 Windows 
Mobile 等 平台 上 运行 的 移动 Web 应 用 ， 且 完全 能 达到 与 Native APP 一 样 的 应 用 效果 。 根 据 官方 
文档 的 说 明 ，jQuery Mobile 框架 具有 跨 平 台 、 易 学 易 用 、 功 能 完善 以 及 风格 多 样 等 显著 特点 。 





@ ”完全 基于 最 新 的 HTML 5、CSS 3、JavaScript 等 Web 标准 ， 整 个 库 在 压缩 和 gzip 后 大 
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约 不 到 200KB 大 小 ， 非 常 轻 量 级 。 


@ 全 面 兼容 iOS、Android、Blackberry、Palm WebOS、Windows Mobile、MeeGo 等 主流 
移动 平台 ， 而 且 Android 平台 上 的 开发 人 员 还 可 以 使 用 一 些 专 为 Android 定制 的 主题 。 

@ 提供 多 种 函数 库 ， 例 如 键盘 、 和 触 控 等 功能 ， 不 需要 编写 过 多 代码 ， 通 过 简单 的 设置 就 
可 以 产生 强大 的 功能 ， 大 大 地 提高 了 编程 效率 。 

@ ”提供 了 丰富 主题 风格 ， 轻 轻松 松 就 能 够 快速 创建 出 高 质量 的 应 用 页 面 。 

@ “可 通过 jQuery UI 的 ThemeRoller 在 线 工具 定制 出 有 特色 的 页 面 风格 ， 并 且 可 以 将 代码 
下 载 下 来 直接 应 用 。 


二 jQuery Mobile 官方 文档 的 地 址 为 http://apijquerymobile.comy/。 


总 而 言 之 ，jQuery Mobile 框架 是 目前 最 强大 的 前 端 移动 平台 框架 。 随 着 jQuery Mobile 框架 
功能 的 不 断 提高 ， 其 在 移动 平台 上 的 Web APP 用 户 体验 也 会 得 到 不 断 提升 。 壁 如， 通过 实现 新 
的 事件 ， 可 以 让 触 控 操作 更 加 简单 流畅 ， 通 过 实现 新 的 插件 ， 可 以 增强 用 户 界面 功能 、 提 高 用 户 
体验 ; 通过 实现 新 的 主题 ， 可 以 让 风格 更 加 多 样 化 。 

从 下 一 小 节 开 始 ， 我 们 将 正式 进入 jQuery Mobile 框架 的 安装 、 配 置 、 开 发 及 使 用 环节 ， 读 
者 将 会 看 到 jQuery Mobile 框架 在 构建 WebAPP 应 用 方面 的 强大 功能 。 














10.1.2 jQuery Mobile 框架 安装 与 配置 


jQuery Mobile 框架 的 安装 与 配置 与 jQuery 框架 类 似 ， 如 果 读者 有 jQuery 框架 的 开发 基础 ， 
学 习 起 来 会 简单 一 些 。 一 般 来 讲 ， 使 用 jQuery Mobile 框架 大 致 有 两 种 主要 方式 ， 可 以 从 CDN 
引用 jQuery Mobile 库 使 用 ， 或 者 直接 下 载 jQuery Mobile 库 安装 到 本 地 服务 器 上 使 用 。 虽 然 从 功 
能 效果 上 讲 两 种 方法 无 所 谓 优 劣 ， 但 更 推荐 前 一 种 CDN 的 方式 ， 目 前 该 方式 也 是 主流 做 法 。 下 
面 我 们 详细 介绍 这 两 种 方式 。 


1.CDN 引用 jQuery Mobile 库 


jQuery Mobile 框架 支持 目前 主流 的 CDN 方式 引用 库 文件 ， 这 样 可 以 最 大 程度 提高 文件 下 载 
速度 ， 示 例 代码 如 下 : 





看 起 来 与 jQuery 框架 的 使 用 类 似 ， 该 方式 无 须 设 计 人 员 在 本 地 服务 器 上 安装 任何 程序 ， 只 
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需 直 接 在 HTML 页 面 中 引用 相应 的 JavaScript 库 和 CSS 样式 文件 ， 就 可 以 让 jQuery Mobile 框架 
正常 工作 了 。 
2. 下 载 jQuery Mobile 库 到 本 地 服务 器 


另 一 种 方式 就 是 下 载 jQuery Mobile 库 到 本 地 服务 器 进行 安装 使 用 了 。 官 方 jQuery Mobile 框 
架 安 装 包 的 下 载 地 址 为 http://jquerymobile.com/download/， 打 开 页 面 后 的 效果 如 图 10.1 所 示 。 





GE a 
€ormoolecem 加 C AsmyAmm 让 | 自明 二 9 -二 和 至 
Bes9 3 mA 二 sf BD wan 加 ws 





盏 /QUeMY 


Download 


Download Builder 





Latest stable version 
145 
pm 





从 图 10.1 中 可 以 看 到 最 新 版 的 jQuery Mobile 框架 安装 包 下 载 链 接 ， 压 缩 文 件 名 是 
jquery.mobile-1.4.5.zip， 版 本 号 是 version-1.4.5。 将 下 载 的 压缩 文件 解压 到 本 地 ， 如 图 10.2 所 示 。 


大 小 





Brains PhpSto. 120 kB 
JetBrains Phpsto 89 KB 





履 iqverymobile-1.45 201617/7 1724 WinRARZIP 压 荣 . 7.722 KB 
102 jQuery Mobile 框架 安装 包 目 录 


从 图 10.2 中 可 以 看 到 ， 所 有 的 jQuery Mobile 库 文件 均 在 该 压缩 包 内 ， 设 计 人 员 只 要 引用 相 
应 的 库 文件 即 可 ， 示 例 代码 如 下 : 


<head> 
<link rel=stylesheet href=jquery.mobile-1.4.5.css> 
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其 中 ，“jqueryjs” 文 件 需要 从 jquery.com 网 站 中 获取 ， 读 者 可 参考 jQuery 框架 相关 的 文档 
或 书籍 。 


3. 安装 FireFox 浏览 器 


目前 ， 调 试 运行 jQuery Mobile Web APP 比较 好 的 浏览 器 是 Google Chrome、FireFox 和 
Safari， 另 外 IE 和 Opera 浏览 器 也 支持 。 可 见 ， 由 于 有 jQuery 框架 为 基础 ，jQuery Mobile Web 
APP 对 浏览 器 兼容 性 做 得 还 不 错 。 

本 书 作 者 选用 的 是 FireFox 浏览 器 ，FireFox 浏览 器 拥有 很 强大 的 js 调试 工具 ， 辟 如 查看 
DOM 树 、 定 位 HTML 元 素 、 页 面 事件 触发 、 实 时 监控 CPU 使 用 率 与 内 存 占有 率 、js 代码 调试 
等 功能 。FireFox 浏览 器 的 下 载 地 址 为 http://www.firefox.com.cn/。 


4. 选择 一 款 自己 喜欢 的 开发 工具 ( IDE ) 


因为 jQuery Mobile Web APP 本 质 上 是 HTML 5、JavaScript 和 CSS 语言 项 目 ， 所 以 可 选 的 开 
发 工具 (IDE) 有 很 多 ， 辟 如 Visual Studio、Eclipse、JetBrains WebStorm 等 都 是 很 强大 重量 级 的 
IDE 工具 。 当 然 ， 轻 量 级 的 开发 工具 (比如 Sublime、UltraEdit 和 EditPlus 编辑 器 ) 也 是 完全 能 
胜任 jQuery Mobile Web APP 项 目 开 发 的 。 这 个 完全 看 个 人 喜好 ， 用 着 顺手 就 可 以 。 


10.1.3 创建 第 一 个 jQuery Mobile APP 


本 小 节 我 们 将 实现 第 一 个 jQuery Mobile Web APP， 通 过 一 个 最 基本 的 实例 让 读者 快速 入 
门 ， 对 jQuery Mobile 框架 有 一 个 初步 的 了 解 。 
首先 ， 我 们 新 建 一 个 jqmHello 项 目 。 在 该 项 目下 新 建 一 个 jqmHello.html 页 面 文件 。 


【代码 10-1】 
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下 面 我 们 对 【代码 10-1】 进 行 具体 介绍 。 

第 05 一 07 行 代码 是 使 用 CDN 方式 对 jQuery Mobile 库 文件 的 引用 ， 在 前 面 的 10.1.2 小 节 中 
我 们 有 过 介绍 。 

第 11 一 23 行 代码 定义 了 页 面 的 内 容 ， 其 中 使 用 到 了 HTML 5 规范 中 的 自 定 义 属性 “data- 
role” 来 定义 页 面 元 素 。 


jQuery Mobile 框架 中 常用 的 “data-role” 属 性 值 如 下 : 


header: 页 面 标题 容器 ， 内 部 可 以 包含 文字 、 返 回 按钮 、 功 能 按钮 等 元 素 。 

page: 页 面容 器 ， 其 内 部 的 mobile 元 素 将 会 继承 这 个 容器 上 所 设置 的 属性 。 

content: 页 面 内 容 容器 ， 是 一 个 很 宽容 的 容器 ， 内 部 可 以 包含 标准 的 html 元 素 和 
jQuery Mobile 框架 元 素 。 

footer: 页 面 页 脚 容器 ， 内 部 也 可 以 包含 文字 、 返 回 按钮 、 功 能 按钮 等 元 素 。 

button: 按钮 ， 将 链接 和 普通 按钮 的 样式 设置 成 为 jQuery Mobile 框架 风格 。 
controlgroup: 将 几 个 元 素 设置 成 一 组 ， 一 般 是 几 个 相同 的 元 素 类 型 。 

navbar: 功能 导航 容器 ， 通 俗 地 讲 就 是 工具 条 。 

listview: 列表 展示 容器 ， 类 似 手机 中 联系 人 列表 的 展示 方式 。 

list-divider: 列表 展示 容器 的 表 头 ， 用 来 展示 一 组 列表 的 标题 ， 内 部 不 可 包含 链接 。 
fieldcontain: 区 域 包 衰 容器 ， 用 增加 边 距 和 分 割 线 的 方式 将 容器 内 的 元 素 和 容器 外 的 元 
素 明显 分 隔 。 

none: 阻止 框架 对 元 素 进行 泻 染 ， 使 元 素 以 html 原生 的 状态 显示 ， 主 要 用 于 form 元 素 。 


其 中 ， 第 12、15 和 20 行 代码 中 分 别 使 用 “header”“content ”和 “footer”3 种 属性 定义 了 
页 面 标题 、 内 容 和 页 脚 。 
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下 面 运行 测试 一 下 jqmHello 项 目 ， 使 用 FireFox 浏览 器 打开 jqmHello.html 页 面 ， 效 果 如 图 


10.3 所 示 。 


€ 加 localhost63342/jqm/jqmt 辐 器 C » 三 


Hello jQuery Mobile 


欢迎 使 用 jQuery Mobile ! 
这 是 第 一 个 Query Mobile Web App ! 
jQuery Mobile 框 轨 使 用 简单 易学 ! 


Copyright 2016. by King. 











图 103 jQuery Mobile App 运行 测试 


从 图 10.3 中 可 以 看 到 ， 针 对 不 同 的 “data-role” 属 性 值 ，jQuery Mobile 框架 已 经 定义 好 相应 
的 样式 风格 了 ， 大 大 地 提高 了 设计 人 员 的 编程 效率 。 


1 0 .2 jQuery Mobile 页 面 与 导航 


在 10.1 节 中 我 们 介绍 了 初步 使 用 jQuery Mobile 框架 所 需要 理解 的 基础 内 容 。 本 节 我 们 将 循 
序 渐进 地 介绍 jQuery Mobile 框架 中 关于 页 面 与 导航 的 内 容 。 


10.2.1 jQuery Mobile 单 页 面 


jQuery Mobile 框架 为 设计 人 员 实 现 了 若干 页 面 类 型 ， 包 括 单 页 面 、 多 页 面 等 。 这 一 小 节 我 
们 先 介 绍 单 页 面 ， 因 为 单 页 面 更 干净 、 简 洁 、 轻 量 级 ， 是 jQuery Mobile 框架 推荐 使 用 的 。 

jQuery Mobile 单 页 面试 图 将 全 部 功能 继承 到 单一 HTML 文档 中 ， 这 个 设计 思想 是 比较 超前 
的 ， 很 可 能 也 是 未 来 Web APP 的 设计 趋势 。 下 面 举 一 个 最 简单 的 单 页 面 例子 (对 应 源 代码 
jqmPages 目录 中 的 jqmSinglePages.html 文件 )。 


【代码 10-2】 
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HTML 代码 的 具体 分 析 如 下 : 
第 03 一 13 行 代 码 定 义 了 页 面 的 头 部 〈<head> )， 其 中 引用 了 一 些 jQuery 框架 和 jQuery 


Mobile 框架 的 库 文 件 。 
第 15 一 28 行 代码 定义 了 页 面 的 主体 部 分 ， 其 中 第 15 行 代码 中 <div> 标 签 内 使 用 了 “data- 


role="page"” 属 性 ， 表 明 该 <div> 标 签 为 一 个 页 面 (page) 容器 。“data-role” 属 性 在 前 文中 有 过 


介绍 ， 这 里 不 再 袭 述 。 
第 16 一 18 行 代码 定义 了 该 页 面容 器 的 头 部 ， 其 中 第 16 行 代码 中 <div> 标 签 内 使 用 了 “data- 


role="header"” 属 性 。 
第 19 一 24 行 代码 定义 了 该 页 面容 器 的 主体 ， 其 中 第 19 行 代码 中 <div> 标 签 内 使 用 了 “data- 
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role="main"” 属 性 ， 另 外 几 行 代码 定义 了 一 些 页 面 内 容 。 

第 25 一 27 行 代码 定义 了 该 页 面容 器 的 底部 ， 其 中 第 25 行 代码 中 <div> 标 签 内 使 用 了 “data- 
role="footer"” 属 性 。 

我 们 注意 到 ， 在 【代码 10-2】 中 定义 的 页 面容 器 是 使 用 <div> 标 签 元 素 、 通 过 “data-role” 属 
性 配合 实现 的 ， 这 也 是 jQuery Mobile 框架 的 特点 。 

下 面 我 们 测试 一 下 jqmSinglePages.html 页 面 文件 ， 其 页 面 效果 如 图 10.4 所 示 。 单 页 面 中 定 
义 的 内 容 全 部 显示 出 来 了 ， 界 面 看 上 去 简单 、 干 净 ， 很 有 特色 。 


四 Single page| 单 ，X 


€ Dllocalhost63342/jqm ~ 轩 器 |C » 三 


Single Page | 单 页 面 





This template is standard HTML document with 
a single page" container inside. 


该 模板 是 一 个 标准 单 页 面 HTML 文 档 . 


We strongly recommend building your app as a 
series of sper pedes like this Se it's 
cleaner more lightweight and works better 
without JavaScript. 





建议 使 用 单 建 您 的 Web App. 
3 A 
Footer | 页 面 应 部 





104 ” 单 页 面 运行 效果 


10.2.2 jQuery Mobile 多 页 面 


前 面 一 个 小 节 我 们 介绍 了 单 页 面 ， 本 小 节 看 一 下 多 页 面 的 例子 〈 对 应 源 代 码 jqmPages 目录 
中 的 jqmMultiPages.html 文件 )。 


【代码 10-3】 
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代码 的 具体 分 析 如 下 : 


第 01 一 17 行 代码 定义 了 第 1 个 页 面 ， 其 定义 方法 与 【代码 10-2】 中 的 单 页 面 定义 方法 类 
似 ， 其 id 属性 值 为 "pageOne"。 

第 18 一 32 行 代码 定义 了 第 2 个 页 面 ， 其 id 属性 值 为 "pageTwo"， 并 增加 了 “data- 
theme="a"” 属 性 。 

第 33 一 48 行 代码 定义 了 第 3 个 页 面 ， 其 id 属性 值 为 "pagePopup"， 是 一 个 弹出 式 对 话 框 页 面 。 

第 11 行 代码 定义 了 一 个 超 链 接 ， 其 href 属性 值 为 “hre 仁 "#pageTwo"”， 用 于 链接 到 第 2 个 
页 面 。 

第 12 行 代码 定义 了 一 个 超 链 接 ， 其 href 属性 值 为 “hre 传 "#pagePopup"”， 用 于 链接 到 第 3 
个 页 面 。 我 们 注意 到 ， 该 超 链 接 内 增加 了 “data-rel="dialog"” 与 “data-transition="pop"” 属 性 ， 
这 样 第 3 个 页 面 将 会 以 弹出 对 话 框 页 面 的 形式 进行 显示 。“data-transition” 属 性 用 于 定义 动画 形 
式 ， 后 面 我 们 还 会 详细 介绍 。 

第 27 行 代码 定义 了 一 个 超 链接 ， 其 href 属性 值 为 “hre 伟 "#pageOne"”， 并 增加 了 “data- 
rel="back"” 属 性 定义 ， 用 于 返回 到 第 1 个 页 面 。 

第 43 行 代码 定义 了 一 个 超 链 接 ， 其 href 属性 值 为 “hre 伍 "#pageOne"”， 并 同样 增加 了 
“data-rel="back"” 属 性 定义 ， 同 样 用 于 返回 到 第 1 个 页 面 。 

下 面 我 们 测试 一 下 jqmMultiPages.html 页 面 文件 ， 打 开 后 初始 页 面 的 效果 如 图 10.5 所 示 。 

在 图 10.5 中 ， 第 1 个 页 面 中 定义 的 内 容 全 部 显示 出 来 ， 我 们 看 到 了 链接 到 第 2 个 和 第 3 个 
页 面 的 按钮 。 点 击 “Show second page | 显示 页 面 二 ”， 打 开 后 其 页 面 的 效果 如 图 10.6 所 示 。 在 
图 10.6 中 ， 第 2 个 页 面 中 定义 的 内 容 全 部 显示 出 来 ， 页 面 中 还 含有 返回 到 第 1 个 页 面 的 按钮 。 


大 一 一、 ine 


© 63342/jqm/jamk » 于 a 
Tn € GD localhost63342/janyjamf 司 眼 Cc » 三 





Multi Page | 多 页 面 
Second Page 
One Page | 页 面 一 
Thave an id of "pageoner on my page container Two Page | 页 面 二 
本 页 面 id 值 为 "pageOne*. 


1have an id of "pageTwo" on my page container. 
Show internal pages: 


本 页 面 id 值 为 "pageTwo"- 
Show second page | 昱 示 页 面 二 


Back to page "one" | 返回 页 面 一 





Show page "popup” (as a dialog) | 对 话机 而 








page Footer | 页 面 庄 部 Page Footer | 页 面 底部 


图 10.5 多 页 面 运行 效果 (1) 图 106 多 页 面 运行 效果 (2) 
返回 到 【代码 10-3】 中 的 第 19 行 代码 。“data-theme="a"” 属 性 用 于 定义 页 面 主题 样式 ， 我 
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们 可 以 将 其 修改 为 “data-theme="b"”， 再 次 运行 页 面 ， 效 果 如 图 10.7 所 示 。 


在 图 10.7 中 ， 页 面 3 





题 样式 ， 可 供 设计 人 员 在 编写 代码 时 选用 。 


点 击 图 10.7 中 的 “Back to page "one" | 返回 页 面 
点 击 图 10.5 中 的 “Show page "popup" (as a dialog) 


示 。 我 们 继续 点 击 其 中 的 “Back to page "one" | 返回 页 面 


面 中 。 





加 Second page x + 


所 © localhost6334 辕 跟 CC » 


Second Page 


Two Page | 页 面 二 


| have an id of " wo" on my page container 


本 页 面 id 值 为 "pageTwo" 


Back to page "one” | 返回 页 面 一 


Page Footer | 页 面 底部 


图 10.7 多 页 面 运行 效果 (3) 


10.2.3 jQuery Mobile 对 话 框 页 面 


jQuery Mobile 框架 为 设计 人 员 提 供 了 多 种 风格 的 对 话 框 页 面 ， 本 小 节 我 们 将 详细 地 介绍 对 
话 框 页 面 示 例 〈 对 应 源 代码 jqmPages 目录 中 的 jqmDialogPage.html 文件 )。 


【代码 10-4】 


<h4>Basics | 基本 型 对 话 框 </h4> 
<a href="dialog-basic.html" 








E 题 样式 改变 了 。jQuery Mobile 框架 为 设计 人 员 预 置 了 一 些 有 特色 的 主 








-”， 页 面 将 会 跳 回 图 10.5 所 示 的 页 面 中 ， 
对 话 框 页 面 ” 打开 的 页 面 效 果 如 图 10.8 所 
”按钮 ， 将 会 返回 到 图 10.5 所 示 的 界 




















- D x 


< 辕 照 Cc ”| 至 


x Dialog | 对 活 柜 页 面 


Popup Page 
1 have an id of "popup” on my page container 
and ory look eB dhaog Fe 


本 E 桓 id 全 "Pagefopup' 看 上 去 侈 个 对 





dialog” attribute 


ok and 3 
”attribute to change the 


Back to page “one" | 返回 页 面 


Page Footer | 页 而 应 部 


图 10.8 多 页 面 运 行 效果 (4) 


class="ui-shadow ui-btn ui-corner-all ui-btn-inline" 


data-transition="pop"> 


Open dialog | 打开 对 话 框 


</a> 


代码 的 具体 分 析 如 下 : 


第 02 一 06 行 代码 定义 了 一 个 超 链 接 ， 月 





目 于 打开 一 个 对 话 框 页 面 。 


第 02 行 代码 定义 了 “href-"dialog-basic.html"” 属 性 ， 表 示 对 话 框 页 面 文档 名 称 为 “dialog- 
basic.html”。 
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第 03 行 代码 定义 了 CSS 样式 。 

第 04 行 代码 定义 了 “data-transition="pop"” 属 性 ， 表 示 为 弹出 式 对 话 框 。 

运行 jqmDialogPage.html 页 面 ， 效 果 如 图 10.9 所 示 。 继 续 点 击 “Open dialog | 打开 对 话 框 ” 
按钮 ， 打 开 的 弹出 式 对 话 框 页 面 效果 如 图 10.10 所 示 。 


€> 加 localhost63342 辕 品 CC » 三 


加 jQuery Mobile xX 
所 加 localhost63342/jar 7 国 器 C » 三 





6 | Dialog 
Dialog Page | 对 话 框 页 面 
Basics | 基本 型 对 话 杠 Delete page | 删除 页 面 ? 
An e can be presented as a modal dial is i i 
yaa the a attrib SS eleouan poe sled es ao 
to the page. 


Sounds good | 好 的 


data-di lo 二 
a-dialog="true” 属 性 展现 为 对 话 框 型 式 . 
Cancel | 取消 


Open dialog | 打开 对 话 框 














v 


10.9 ”弹出 式 对 话 框 页 面 效 果 (1) 图 10.10 ”弹出 式 对 话 框 页 面 效果 (2) 


下 面 我 们 看 下 弹出 式 对 话 框 页 面 的 代码 (对 应 源 代码 jqmPages 目录 中 的 dialog-basic.html 文 
件 )。 


【代码 10-5】 
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在 【代码 10-4】 中 第 04 行 代码 定义 了 “data-transition="pop"” 属 性 ， 同 样 还 可 以 为 “data- 
transition” 属 性 定义 不 同 的 动画 风格 ， 有 具体 参见 【代码 10-6】( 对 应 源 代码 jqmPages 目录 中 的 
jqmDialogPage.html 文件 )。 


【代码 10-6】 





在 【代码 10-6】 中 ， 分 别 定 义 了 3 种 “data-transition” 属 性 值 〈"pop"、?"slidedown" 和 
"flip")， 表 示 3 种 不 同 的 动画 风格 。 在 书 中 无 法 展现 其 动画 效果 ， 读 者 可 以 自行 运行 配套 源 代 码 
进行 测试 ， 体 会 一 下 具体 效果 。 

通过 前 面 几 个 效果 图 ， 我 们 注意 到 jQuery Mobile 框架 的 对 话 框 页 面 中 的 关闭 按钮 均 在 左上 
角 ， 那 么 能 不 能 定义 成 右上 角 或 无 关闭 按钮 的 风格 呢 ? 答案 是 肯定 的 ， 可 以 通过 “data-close- 
btn” 属 性 来 实现 。 

我 们 先 看 右上 角 关 闭 按钮 风格 对 话 框 页 面 ， 具 体 见 下 面 〈 对 应 源 代码 jqmPages 目录 中 的 
dialog-rightclosebtn.html 文件 )。 


【代码 10-7】 
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在 【代码 10-7】 中 ， 第 01 行 代码 定义 的 <div> 标 签 元 素 中 增加 了 一 个 “ data-close- 
btn="right"” 属 性 ， 用 于 表明 该 对 话 框 页 面 为 右 侧 关 闭 按钮 对 话 框 。 
运行 程序 ， 页 面 效 果 如 图 10.11 所 示 。 


过) iocalhost63342/qaric * 四 跟 cC » 三 
Dialog 


Right close button | 右 侧 关闭 对 话 框 


This is a regular led as a dialog. To 
create 3 diglog ls 全 人 3 normal pase 
5 include a itor 2h an 

datarrel= “dialog”attri 











10.11 右 侧 关 闭 按钮 对 话 框 页 面 效果 


接着 ， 我 们 看 一 下 无 关闭 按钮 风格 对 话 框 页 面 〈 对 应 源 代码 jqmPages 目录 中 的 dialog- 
noclosebtn.html 文件 )。 


【代码 10-8】 





在 【代码 10-8】 中 ， 第 01 行 代 码 定义 的 <div> 标 签 元 素 中 同样 增加 了 一 个 “data-close- 
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btn="none"” 属 性 ， 用 于 表明 该 对 话 框 页 面 为 无 关闭 按钮 对 话 框 。 
运行 程序 ， 页 面 效 果 如 图 10.12 所 示 。 


| DO localhost63342/jqm/jo 转口 Ce » 三 
Dialog 


No close button | 无 关闭 按钮 对 话 框 


This is a regular page, 
create a 全 pag a normal page 
and include a transition and 
data-rel=“dialog” attribute. 


Ok, 1getit | 好 的 


图 10.12 无 关闭 按钮 对 话 框 页 面 效 果 


接着 ,我 们 看 一 下 无 圆 角 对 话 框 页 面 的 代码 (对 应 源 代码 jqmPages 目录 中 的 dialog- 
corners.html 文件 )。 


【代码 10-9】 


led as a dialog. To 














第 01 行 代码 定义 的 <div> 标 签 元 素 中 同样 增加 了 一 个 “data-comers="false"” 属 性 ， 用 于 表 
明 该 对 话 框 页 面 为 无 圆 角 对 话 框 。 
运行 程序 ， 页 面 效果 如 图 10.13 所 示 。 
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所 | 四 localhost63342/jqm/jio 转口 CC » 








[Xx) Dialog 


No rounded corners | 无 国 角 对 话 框 

This is a regular page, styled as a dialog. To 
create a 向 os nie a normal pee 
and include a transition and 

data-rel= “dialog” attribute. 


Ok, 1get it 


图 10.13 ”无 圆 角 对 话 框 页 面 效 果 








10.2.4 jQuery Mobile 导航 


jQuery Mobile 框架 设计 了 一 个 导航 Navigation ) 系统 ， 能 够 通过 Ajax 方式 链接 到 新 的 页 
面 或 DOM 标签 上 ， 提 高 了 标准 的 超 链接 方式 的 表现 能 力 。jQuery Mobile 框架 的 一 个 核心 特性 
就 是 能 够 将 完全 不 同 的 页 面 中 的 视图 内 容 导 入 到 应 用 初始 页 面 中 ， 类 似 使 用 锚 点 〈anchor) 和 返 
回 按钮 的 导航 方式 。 jQuery Mobile 框架 定义 了 一 个 “navigate” 事 件 ， 用 于 处 理 导航 操作 ， 其 中 
“navigate” 事 件 是 针对 HTML 的 “hashchange” 事 件 和 HTML 5 的 “popstate” 事 件 的 封装 
事件 。 

下 面 我 们 介绍 一 个 使 用 jQuery Mobile 导航 的 例子 〈 对 应 源 代码 jqmNaviEvent 目录 中 的 
jqmNaviEvent.html 文件 )。 





【代码 10-10】 
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代码 的 具体 分 析 如 下 : 


第 03 一 14 行 代码 定义 了 页 面 文档 的 头 部 ， 引 用 了 相关 的 库 文件 。 我 们 注意 到 第 13 行 代码 引 
用 了 一 个 自 定义 脚本 文件 JqmNaviEventjs)。 

第 15 一 34 行 代码 定义 了 页 面 文档 的 主体 部 分 。 其 中 ， 第 24 行 与 第 28 行 代码 定义 了 两 个 超 
链接 ，id 值 分 别 为 “a-navi-top” 与 “a-navi-bottom”， 相 当 于 两 个 锚 点 。 

下 面 我 们 看 一 下 【代码 10-10】 中 第 13 行 代码 引用 的 自 定义 脚本 文件 (对 应 源 代码 
jqmNaviEvent 目录 中 的 jqmNaviEventjs 文件 )。 
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【代码 10-11】 





如 果 读 者 有 过 jQuery 框架 开发 经 验 ， 理 解 上 面 的 脚本 代码 应 该 不 难 ， 下 面 我 们 对 【代码 10- 
11】 中 的 js 代码 做 一 个 详细 的 介绍 。 


第 05 一 11 行 脚本 代码 定义 了 针对 jQuery Mobile 框架 中 "navigate" 事 件 的 处 理 函 数 方法 ， 并 
将 状态 “state” 参 数 属性 值 输出 到 控制 台中 显示 。 

第 13 一 17 行 代码 定义 了 【代码 10-10】 中 第 24 行 代码 定义 的 id 值 为 “a-navi-top” 的 超 链接 
的 处 理 函 数 方法 。 其 中 ， 第 15 行 代码 设 定 了 新 的 hash 值 ("hash-changed")。 第 16 行 代码 使 用 
“$.mobile.navigate()” 方 法 将 页 面 导航 定位 到 锚 点 (“#bottom” 上 ， 该 锚 点 的 定义 见 【 代 码 10- 
10】 中 第 31 行 代码 中 的 超 链接 元 素 。 
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第 19 一 28 行 代 码 定义 了 【代码 10-10】 中 第 28 行 代码 定义 的 id 值 为 “a-navi-bottom ”的 超 
链接 的 处 理 函 数 方法 。 其 中 ， 第 21 一 23 行 代码 使 用 “$.mobile.navigate0” 方 法 将 页 面 导航 定位 
到 锚 点 〈“#top”) 上 ， 该 错 点 的 定义 见 【 代 码 10-10】 中 第 18 行 代码 中 的 超 链接 元 素 ， 并 增加 了 
一 个 “info” 参 数 用 于 传递 信息 。 第 25 行 代码 再 次 使 用 “$.mobile.navigate()” 方 法 将 页 面 导航 定 
位 到 锚 点 〈“#bottom”) 上 。 第 27 行 代码 使 用 “window.history.back()” 方 法 进行 页 面 访问 历史 的 
返回 操作 。 

运行 jqmNaviEvent.html， 页 面 初始 效果 如 图 10.14 所 示 。 

然后 ， 我 们 使 用 “Ctd+ShifttJ” 快 捷 键 打开 FireFox 浏览 器 控制 台 ， 并 在 图 10.14 中 继续 点 
击 “Click to bottom anchor” 按 钮 。 为 了 更 好 地 让 读者 理解 导航 操作 过 程 ， 我 们 先 将 【代码 10- 
11】 中 的 第 15 行 关 于 设置 hash 值 的 代码 注销 ， 此 时 的 页 面 效 果 与 控制 台 输 出 信息 分 别 如 图 
10.15 与 图 10.16 所 示 。 








= oo x a 3 o x 
全 Navigation -jQuer.. x WF Non je 


所 | © localhost63342/jqm/jo 转 品 CC » 


PD localhost63342/Jqr 加 中 C » 





~ Query Mobile - Navigation | 导航 


The $.mobile.navigate method and the 


jQuery Mobile - Navigation | 导航 navigate event form thefoundation of jQuery 
二 人 Mobile's navigation infrastructure. 

The $.mobile.navigate method and the 2 sore MR 要 泛 开 

navigate event form the foundation of jQuery un hash 和 direction 芭 些 属性 

MoE s navigation infrastructure. 


jQuery Mobile 框 架 的 $.mobile.navigate 方法 和 Click to top anchor 
navigate 事件 用 于 导航 操作 





Click to bottom anchor Copyright 2016 by king 




















~ 加 
图 10.14 页 面 导 航 效果 〈1) 10.15 页 面 导航 效果 (2) 
全 浏览 器 近 制 台 更 口 X 
昌 网 阁 N) -ee CS -8 JS ~ @ 安全 (U) ” 9 日 志 U e 服 务 器 9- 清 室 (R) 
navigated! jamNoviEvent.. :7:7 
undefined jamNoviEvent.. :8:7 
undefined jamNoviEvent.. :9:7 
undefined jamNoviEven., :18:7 
undefined jgmWoviEven- ;11:7 











10.16 ”页 面 导航 控 制 台 输出 (1) 


从 图 10.15 中 可 以 看 到 ， 点 击 “Click to bottom anchor” 按 钮 操作 后 ， 页 面 跳 转 到 了 底部 。 而 
图 10.16 中 控制 台 输 出 了 该 操作 带 来 的 信息 ， 输 出 每 条 信息 的 脚本 代码 位 置 在 控制 台 界 面 的 右 
侧 ， 有 详细 的 脚本 文件 名 称 和 具体 行 号 。 

我 们 有 必要 将 图 10.16 中 控制 台 的 输出 信息 做 一 个 详细 分 析 ， 这 样 也 有 助 于 理解 jQuery 
Mobile 框架 导航 的 工作 原理 。 

当 我 们 点 击 “Click to bottom anchor” 按 钮 后 ,【 代 码 10-11】 中 第 16 行 代码 执行 了 一 
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“$.mobile.navigate()” 方 法 ， 触 发 了 一 次 “navigate” 事 件 。 然 后 , 【代码 10-11】 中 第 05 一 11 行 
脚本 代码 定义 的 处 理 方法 输出 了 若干 行 信息 〈 璧 如， 第 06 行 脚本 代码 输出 的 “navigated!” 信 
息 ， 而 第 07 一 10 行 代码 定义 的 “state.info”“state.direction”“state.url” 和 “state.hash” 参 数值 输 
出 为 空 )。 至 此 ， 第 一 次 触发 “navigate ”事件 后 的 控制 台 信 息 全 部 输出 完毕 。 

然后 ， 复 原 关 于 【代码 10-11】 中 第 15 行 关于 设置 hash 值 的 代码 的 注销 ， 然 后 刷新 页 面 并 
重新 进行 点 击 “Click to bottom anchor” 按 钮 的 操作 ， 此 时 的 控制 台 输出 信息 如 图 10.17 所 示 。 








国 浏 澳 品 控制 台 - 日 x 
四 网 洛 NJ)-@ Cs -© Js 

navigated! 

undefined 

undefined JjqmNaviEvent.. :9: 





了 gmNaviEven- :16: 





naviga 
undefined 

undefined jamNoviEvent. :9:7 
undefined JqmNoviEven- :19:7 
undefined jgqmNoviEven- :11:7 











图 10.17 页 面 导 航 控制 台 输 出 〈2) 


从 图 10.17 中 可 以 看 到 ， 由 于 恢复 了 【代码 10-11】 中 第 15 行 代码 设 定 了 新 hash 值 的 操 
作 ， 因 此 触发 了 一 次 “navigate” 事 件 ， 同 时 第 09 和 10 行 代码 在 控制 台 输出 了 新 的 “state.url” 
和 “state.hash” 参 数值 。 然 后 ， 第 16 行 代码 执行 了 “$.mobile.navigate0” 方 法 后 ， 再 次 触发 了 
“navigate” 事 件 ， 我 们 看 到 控制 台 的 输出 与 图 10.16 的 内 容 完全 一 致 。 

最 后 ， 点 击 图 10.15 中 的 “Click to top anchor” 按 钮 ， 页 面 会 返回 图 10.14 的 初始 状态 。 此 
时 控制 台 输出 信息 如 图 10.18 所 示 。 


二 浏览 器 控制 台 - 0 x 
网 络 N)- @ CSS -上 JS ，@ 安全 (U) ”9 日 志 山 - e 服 务 器 9 - 清空 (R) 


jqmNaviEvent..:7:7 





navigated! 










undefined 
undefined 
undefined 
Undefined 
navigated! 
undefined 
undefined 


undefined 


jamNaviEvent. 
jamNoviEvent. 
jamNoviEvent..:9:7 
Novigation jamNoviEven.. :16:7 





jqmNoviEven..:11:7 











图 10.18 页 面 导航 控制 台 输 出 (3) 
从 图 10.18 中 可 以 看 到 ， 点 击 “Click to top anchor” 按 钮 操作 后 ,一共 触发 了 3 次 
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“navigate” 事 件 ， 却 只 有 【代码 10-11】 中 第 27 行 代码 执行 的 “window.history.back()” 操 作 ， 
并 输出 了 新 的 “state.info”“state.direction”“state.url ”和 “state.hash” 参 数值 ， 而 此 时 新 的 hash 
值 是 “#top”。 


10.2.5 ”jQuery Mobile 加 载 


jQuery Mobile 框架 设计 了 一 个 加 载 (Loader) 元 素 ， 当 页 面 通过 Ajax 方式 刷新 内 容 时 ， 可 
以 通过 在 页 面 中 显示 加 载 (Loader) 元 素来 完成 页 面 提示 信息 的 功能 。 

应 用 jQuery Mobile 框架 加 载 (Loader) 元 素 的 方法 非常 简单 ， 还 支持 自 定义 主题 风格 功 
能 。 下 面 我 们 介绍 一 个 使 用 jQuery Mobile 加 载 (Loader) 元 素 的 例子 (对 应 源 代码 jqmLoader 
目录 中 的 jqmLoader.html 文件 )。 


【代码 10-12】 





246 


第 10 章 jQuery Mobile 移动 框架 


代码 的 具体 分 析 如 下 : 
第 03 一 14 行 代码 定义 了 页 面 文档 的 头 部 ， 引 用 了 相关 的 库 文件 。 我 们 注意 到 第 13 行 代 码 引 
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用 了 一 个 自 定义 脚本 文件 (jqmLoaderjs)。 

第 15 一 46 行 代码 定义 了 页 面 文档 的 主体 部 分 。 其 中 ， 第 22 一 25 行 代码 通过 <button> 标 签 元 
素 定 义 了 第 一 组 加 载 元 素 打开 链接 按钮 ， 该 组 为 基本 型 加 载 元 素 。 然 后 ， 第 31 一 32 行 代码 定义 
了 第 二 组 加 载 元 素 打开 链接 按钮 ， 该 组 为 自 定义 页 面 加 载 元 素 。 最 后 ， 第 37 一 39 行 定 义 了 第 三 
组 加 载 元 素 打开 链接 按钮 ， 该 组 为 主题 风格 加 载 元 素 。 

下 面 我 们 看 一 下 【代码 10-12】 中 第 13 行 代码 引用 的 自 定义 脚本 文件 (对 应 源 代码 
jqmLoader 目录 中 的 jqmLoaderjs 文件 )。 


【代码 10-13】 





JS 代码 的 具体 分 析 如 下 : 
第 02 一 07 行 脚本 代码 定义 了 用 于 显示 在 加 载 元 素 中 的 相关 参数 。 
第 08 一 14 行 代码 使 用 “$.mobile.loading0 ”方法 在 页 面 中 显示 加 载 元 素 。 
第 05 一 17 行 代码 使 用 “$.mobile.loading0 ”方法 在 页 面 中 隐藏 加 载 元 素 。 
运行 jqamLoaderhtml， 页 面 初 始 效果 如 图 10.19 所 示 。 然 后 ， 我 们 依次 点 击 图 10.19 中 的 
“Icon (default)”“Icon + Text” 和 “Text only”3 个 按钮 ， 代 表 类 型 依次 为 图 标 〔 默 认 )、 图 标 + 
文本 、 仅 文本 ， 其 页 面 效 果 分 别 如 图 10.20、 图 10.21 和 图 10.22 所 示 。 
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图 10.19 页面 加 载 元 素 效果 1) 图 10.20 页面 加 载 元 素 效果 (2) 
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图 10.21 页 面 加 载 元 素 效果 (3) 


图 10.22 ”页面 加 载 元 素 效果 (4) 


如 果 需 要 隐藏 加 载 元 素 ， 可 以 点 击 最 右 侧 的 “Hide” 按 钮 。 然 后 ， 我 们 继续 点 击 “Custom 
HTML” 按 钮 ， 页 面 将 会 显示 自 定义 加 载 元 素 ， 其 页 面 如 图 10.23 所 示 。 从 图 10.23 中 可 以 看 
到 ， 加 载 元 素 为 【代码 10-12】 中 第 31 行 代码 定义 的 “sre” 属 性 值 ， 显 示 为 本 地 图 片 和 一 些 文 


本 内 容 。 
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图 10.23 页面 加 载 元 素 效 果 (五 ) 


最 后 ， 我 们 还 实现 了 带 有 主题 风格 的 加 载 元 素 ， 与 前 面 介绍 的 加 载 元 素 类 似 ， 读 者 可 以 自行 
进行 测试 。 





10.2.6 jQuery Mobile 动画 效果 


在 前 面 各 个 小 节 的 应 用 中 都 有 使 用 过 jQuery Mobile 动画 效果 ， 辟 如 元 素 标 签 中 定义 的 
“data-transition="pop" ”属性 就 是 一 种 最 常用 的 “弹出 式 ” 动 画 效 果 。 下 面 给 出 根据 jQuery 
Mobile 框架 官方 文档 中 的 内 容 总 结 的 关于 jQuery Mobile 动画 效果 的 含义 。 
fade: 消 隐 效果 。 
pop: 弹出 式 效果 。 
flip: 旋转 式 效果 。 
turn: 弹出 + 旋转 式 效果 。 
flow: 切换 式 效果 。 
slide: 滑动 效果 。 
slideup: 向 上 滑动 效果 。 
slidedown: 向 下 滑动 效果 。 
slidefade: 滑动 + 消 隐 效 果 。 
none: 默认 无 动画 效果 。 


除了 以 上 这 些 jQuery Mobile 框架 为 设计 人 员 内 置 的 动画 效果 ，jQuery Mobile 框架 还 允许 设 
计 人 员 通 过 使 用 “$.mobile.transitionHandlers” 属 性 自 定义 动画 效果 ， 感 兴趣 的 读者 可 以 参考 官 
方 文档 深入 了 解 。 


250 


第 10 章 jQuery Mobile 移动 框架 


使 用 jQuery Mobile 动画 效果 的 方法 非常 简单 ， 其 实 前 面 章节 中 的 应 用 代码 已 经 使 用 过 了 。 
下 面 我 们 将 全 部 内 置 的 jQuery Mobile 动画 效果 整合 在 一 起 ， 编 写 一 个 简单 的 应 用 例 程 ( 详 见 源 
代码 jqmTransitions 目录 中 的 jqmTransitions.html、page-transitions-dialog.html 和 page-transitions- 
page.html 三 个 HTML 文档 ， 其 中 后 两 个 HTML 文档 分 别 用 于 显示 对 话 框 与 显示 页 面 的 功能 )。 
jqmTransitions.html 文档 中 关于 动画 效果 的 定义 如 下 : 


【代码 10-14】 
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从 上 面 的 代码 中 可 以 看 到 ， 通 过 定义 不 同 的 “data-transition” 属 性 值 就 能 显示 出 不 同 的 动画 
效果 。 运 行 jqmTransitions.html， 页 面 初始 效果 如 图 10.24 所 示 。 然 后 ， 我 们 可 以 依次 点 击 图 
10.24 中 的 各 个 动画 效果 按钮 ， 其 中 “dialog ”表示 对 话 框 ，“page” 表 示 页 面 。 在 书 中 无 法 体现 
出 各 个 动画 效果 ， 读 者 可 以 自行 测试 本 书 中 的 源 代码 ， 体 验 一 下 jQuery Mobile 中 的 各 种 动 
画 效果 。 
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fade cialog page 

pop ao pape 

ip nog page 

turn dslog Page 

flow dslog Page 
slidefade ealog Page 
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图 1024 jQuery Mobile 动画 效果 界面 


1 0.3 jQuery Mobile CSS 样式 


在 10.2 节 我 们 介绍 了 关于 jQuery Mobile 框架 页 面 与 导航 方面 的 相关 内 容 与 使 用 方法 ， 本 节 
将 介绍 jQuery Mobile 框架 中 关于 CSS 样式 的 内 容 。 


10.3.1 按钮 样式 
按钮 是 所 有 前 端 框 架 中 最 基本 的 一 类 组 件 。 因 为 按钮 是 最 常用 的 一 类 元 素 ， 所 以 漂亮 的 按钮 
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风格 样式 是 体现 一 个 前 端 框 架 水 平 的 重要 因素 之 一 。 在 jQuery Mobile 框架 中 设计 了 两 种 类 型 的 
按钮 ， 一 种 是 使 用 传统 的 <input> 标 签 按钮 ， 另 一 种 是 使 用 <a> 和 <button> 标 签 的 按钮 ， 二 者 在 表 
现 效果 上 是 一 致 的 。 

首先 ， 我 们 先 看 一 段 传统 <input> 标 签 按 钮 的 代码 (对 应 源 代码 jqmButton 目录 中 的 
jqmInputButton.html 文件 )。 


【代码 10-15】 





通过 定义 <inpu 忆 标签 元 素 不 同 的 “type ”属性 值 就 可 以 显示 出 不 同样 式 的 功能 按钮 。 运 行 
jqmInputButton.html 页 面 ， 页 面 效 果 如 图 10.25 所 示 。 


F< 


过 Dlocalhost63342 转眼 CC » 三 











Input buttons 
Input buttons; input elements with type="button", 
type="submit", Or type="reset” 
Default 

Button 

Submit 











10.25 ”默认 按钮 效果 


上 面 是 jQuery Mobile 框架 默认 按钮 样式 ， 下 面 我 们 看 一 段 使 用 “data-enhanced ”属性 〈 可 
以 理解 为 一 种 增强 样式 ) 的 <inpu 忆 标签 按钮 的 代码 (对 应 源 代码 jqmButton 目录 中 的 
jqmInputButton.html 文件 )。 


【代码 10-16】 
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从 中 可 以 看 到 ， 通 过 在 第 06 行 代码 <input> 标 签 元 素 中 定义 “data-enhanced” 属 性 值 为 
“true” 就 可 以 继承 页 面 样 式 。 运 行 jqmInputButton.html， 页 面 效 果 如 图 10.26 所 示 。 

然后 ， 将 第 06 行 代码 <inpu 人 > 标签 元 素 中 定义 的 “data-enhanced” 属 性 值 改 为 “false”， 取 消 
继承 页 面 样式 。 再 次 运行 jqmInputButton.html， 页 面 效果 如 图 10.27 所 示 。 


有 jaueyM- Xx + 
€ © localhost63342* 国 跨 Cc 
Enhanced | 增强 样式 


€ 四 localhost63342 图 跟 CC » 
Enhanced | 增强 样式 








Input : use "data-enhanced” 
Input : use "data-enhanced” Ce 





图 10.26 增强 按钮 效果 (1) 图 10.27 增强 按钮 效果 (2) 


从 图 10.27 中 可 以 看 到 ， 取 消 继承 页 面 样式 后 ， 第 05 行 代码 <div> 标 签 元 素 中 的 内 容 与 第 06 
行 代 码 <input> 标 签 元 素 中 定义 的 “value” 属 性 值 “Input value” 分 别 显示 出 来 了 ， 该 <input> 标 签 
元 素 并 没有 继承 页 面 样 式 。 

上 面 是 jQuery Mobile 框架 增强 按钮 样式 ， 下 面 我 们 看 一 段 “ 内 联 样式 ”按钮 的 代码 (对 应 
源 代码 jqmButton 目录 中 的 jqmInputButton.html 文件 )。 


【代码 10-17】 





从 中 可 以 看 到 ， 通 过 在 第 06 行 代码 <input> 标 签 元 素 中 定义 “data-inline” 属 性 值 为 “true” 
就 可 以 显示 内 联 按钮 样式 。 而 第 05 一 08 行 代码 定义 的 是 增强 型 按钮 ， 通 过 在 第 05 行 代码 中 
<div> 标 签 元 素 内 定义 的 CSS 样式 中 增加 “ui-btn-inline” 样 式 将 该 按钮 定义 为 内 联 式 按钮 。 运 行 
jqmImputButton.html， 页 面 效 果 如 图 10.28 所 示 。 
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jQuery M... XxX 





拟 加 | localhost63342 园 跟 |C » 三 
Inline | 内 联 样式 各 


国 
| Input | Enhanced 时 
图 10.28 内 联 按钮 效果 
感 兴趣 的 读者 可 以 自行 将 第 05 行 代码 中 的 “ui-btn-inline” 样 式 去 掉 ， 测 试 一 下 页 面 效果 ， 
看 一 下 按钮 还 是 不 是 内 联 样式 的 。 


我 们 在 前 面 的 例 程 中 介绍 过 jQuery Mobile 框架 的 主题 样式 ， 下 面 就 看 一 下 如 何 定 义 主题 样 
式 按 钮 (对 应 源 代码 jqmButton 目录 中 的 jqmInputButton.html 文件 ): 








【代码 10-18】 





从 代码 中 可 以 看 到 ， 第 04 一 06 行 代码 定义 了 一 组 <input> 标 签 元 素 按钮 ， 通 过 定义 “data- 
theme” 属 性 值 为 “a” 或“b” 就 可 以 显示 不 同 主题 风格 按钮 样式 。 而 第 07 一 18 行 代码 定义 的 是 
一 组 增强 型 按钮 ， 通 过 在 <div> 标 签 元 素 内 定义 的 CSS 样式 中 增加 “ui-btn-a” 或 “ui-btn-b” 样 
式 也 可 以 显示 不 同 主题 风格 按钮 样式 。 
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运行 jamInputButton.html， 页 面 效 果 如 图 10.29 所 示 。 








加 jQuery Mo... xX 

€ Oloalhost63342/ 转 品 iC » 三 

Theme | 主题 按钮 
Input - Inherit 


Input - Theme swatch A 
Input - Theme swatch B 
Enhanced - Inherit 
Enhanced - Theme swatch A 


Enhanced - Theme swatch B 
v 


图 10.29 主题 风格 按钮 效果 


根据 jQuery Mobile 框架 官方 文档 的 介绍 ， 本 书 所 使 用 的 v1.4.5 版 本 默认 仅 支 持 “-a” 和 “- 
b” 两 种 主题 样式 ， 相 比 老 版 本 做 了 一 定 精简 。 当 然 设计 人 员 也 可 以 开发 自 定义 主题 风格 来 实现 
更 丰富 的 主题 样式 。 

下 面 看 一 下 如 何 定 义 图 标 样式 按钮 〈 对 应 源 代码 jqmButton 目录 中 的 jqmInputButton.html 文 
件 )。 


【代码 10-19】 











257 


构建 移动 网 站 与 APP: HTML 5 移动 开发 入 门 与 实战 





第 02 一 10 行 代码 定义 了 一 组 默 样式 图 标 按钮 〈 按 钮 图 标 默 认 在 图 标 左 侧 )。 第 04 行 代码 中 
<input> 标 签 元 素 通过 定义 “data-icon ”属性 值 为 “edit” 就 可 以 显示 一 个 “编辑 ”样式 图 标 按 
钮 。 而 第 05 一 08 行 代码 定义 的 是 一 个 增强 型 按钮 ， 通 过 在 <div> 标 签 元 素 内 定义 的 CSS 样式 中 
增加 “ui-icon-delete” 样 式 就 可 以 显示 “删除 ”样式 图 标 按钮 。 

【代码 10-19】 中 第 12 一 40 行 代码 定义 了 一 组 图 标 在 不 同位 置 的 按钮 (图 标 可 以 在 按钮 的 
上 、 下 、 左 、 右 4 个 位 置 )。 第 14 一 18 行 代码 中 <input> 标 签 元 素 通 过 定义 “data-icon” 属 性 值 为 
“right”“top”“bottom” 和 “left” 就 可 以 显示 图 标 分 别 在 上 、 下 、 左 、 右 4 个 位 置 的 按钮 。 而 

第 19 一 38 行 代码 定义 的 是 一 组 增强 型 按钮 ， 通 过 在 <div> 标 签 元 素 内 定义 的 CSS 样式 中 分 别 增 
加 了 “ui-btn-icon-right”“ui-btn-icon-top”“ui-btn-icon-bottom” 和 “ui-btn-icon-left”4 个 样式 同样 
可 以 显示 图 标 分 别 在 上 、 下 、 左 、 右 4 个 位 置 的 按钮 。 

运行 jqmInputButton.html， 页 面 效 果 如 图 10.30 所 示 。 
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图 10.30 ”主题 风格 按钮 效果 


以 上 的 各 段 代码 均 是 使 用 传统 的 <input> 标 签 设计 按钮 的 方法 。 本 小 节 开 头 介 绍 了 ，jQuery 
Mobile 框架 还 支持 使 用 <a> 和 <button> 标 签 设计 按钮 的 方法 ， 下 面 我 们 继续 看 一 段 使 用 <a> 和 
<button> 标 签 设计 按钮 的 代码 (对 应 源 代码 jqmButton 目录 中 的 jqmButtonMarkup.html 文件 )。 


【代码 10-20】 
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从 代码 中 可 以 看 到 ， 第 03 与 04 行 代码 分 别 使 用 <a> 与 <button> 标 签 定义 了 两 个 按钮 ， 其 标 
签 内 部 的 CSS 样式 代码 是 一 致 的 ， 仅 仅 是 标签 的 使 有 区别。 第 08 一 11 行 代码 使 用 <a> 标 签 定 
义 了 一 组 按钮 ， 实 现 了 【代码 10-19】 中 第 14 一 17 行 代码 同样 的 功能 。 第 15 一 18 行 代码 再 次 使 
用 <a> 标 签 定义 了 一 组 按钮 ， 将 【代码 10-20】 中 第 08 一 11 行 代码 定义 的 按钮 增加 了 内 联 样式 。 

运行 jqmButtonMarkup.html， 页 面 效果 如 图 10.31 所 示 。 


Fe 
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1031 主题 风格 按钮 效果 


关于 jqmButtonMarkup.html 文档 的 内 容 读者 可 以 参看 源 代码 ， 该 文档 基本 上 是 使 用 <a> 与 
<button> 标 签 实现 了 与 jqmInputButton.html 文档 <input> 标 签 同 样 的 功能 。 


10.3.2 ”图 标 样式 


jQuery Mobile 框架 内 置 了 一 套 比 较 完 整 的 图 标 系统 ， 设 计 人 员 可 以 直接 使 用 CSS 样式 来 引 
用 图 标 。jQuery Mobile 框架 的 图 标 系统 摆脱 了 传统 HTML+CSS 设计 模式 下 类 似 使 用 <img> 标 签 
的 编程 方法 ， 使 得 jQuery Mobile 代码 显得 更 漂亮 、 更 整洁 。 当 然 ，jQuery Mobile 框架 的 图 标 系 
统 支 持 自 定义 图 标 ， 方 便 设计 人 员 进 行 扩展 开发 。 

下 面 我 们 看 一 下 使 用 jQuery Mobile 图 标的 代码 (对 应 源 代码 jqmlcons 目录 中 的 
jqmlcons.html 文件 )。 


【代码 10-21】 
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【 第 10 章 jQuery Mobile 移动 框架 





上 面 的 代码 基本 罗列 了 jQuery Mobile 框架 内 置 的 全 部 图 标 样式 ， 具 体 到 某 一 个 图 标 样式 是 
使 用 CSS 样式 代码 “ui-icon-xxx” 来 定义 的 。 运 行 jqmlcons.html， 页 面 效 果 如 图 10.32 所 示 。 





lcons - jQue... X 


DD localhost633: 国 申 外 C » 三 





elelololololelelelele 


audio 





10.32 ”图标 样 式 效果 


由 于 页 面 限 值 ， 图 10.32 中 仅仅 显示 了 一 小 部 分 图 标 。 如 果 读 者 想 使 用 内 联 式 图 标 或 者 无 文 
本 图 标 ， 可 以 添加 如 下 脚本 代码 (对 应 源 代码 jqmlcons 目录 中 的 jqmlcons.html 文件 )。 
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【代码 10-22】 





在 jQuery 脚本 代码 中 ， 我 们 通过 一 组 CheckBox 按钮 来 控制 【代码 10-21】 中 定义 的 一 组 图 


标的 样式 。 
再 次 运行 jqmlcons.html， 内 联 式 图 标 页 面 效 果 如 图 10.33 所 示 ， 无 文本 图 标 页 面 效 果 如 图 
10.34 所 示 。 
az | 
i ee a | 


Oxion Orr Oo 四 ov 
ore， Oro Oro One 
re Or gm Oa 
Sun | Oui Baa Oamen 




















Sn) [Ga (Oa (Oa OOO00O00W0 
Oa Oa Dos Orme 四 号 瑟瑟 oOeee 
和 aococonpPpeQeee 
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Or rm Dron Deore  . OOOOGOAOOONONN ， 
图 10.33 ”内 联 式 图 标 样式 效果 图 10.34 无 文本 图 标 样式 效果 


10.3.3 ”网 格 布局 样式 
jQuery Mobile 框架 专门 设计 开发 了 网 格 布局 样式 ， 主 要 就 是 针对 移动 设备 屏幕 尺寸 偏 窗 、 
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规格 种 类 多 样 的 特点 而 设计 的 。 在 网 格 布局 方面 比较 有 特点 的 就 是 微软 的 Windows Mobile 系 
统 ， 虽 然 Windows Mobile 系统 市 场 占有 率 一 直 只 有 百 分 之 几 (目前 可 能 还 在 下 滑 )， 但 是 从 纯 设 
计 的 角度 上 来 讲 ，Windows Mobile 系统 的 功能 与 使 用 是 没有 任何 问题 的 。 

jQuery Mobile 框架 为 设计 人 员 提 供 了 一 种 非常 简单 的 方法 来 构建 基于 CSS 的 分 栏 布局 ， 并 
将 其 定义 为 “ui-grid” 样 式 。 在 jQuery Mobile 框架 内 一 共 预 设 了 4 种 网 格 布局 ， 具 体 如 下 : 


@ ”两 列 (使 用 “ui-grid-a” CSS 类 ) 。 
@ 三 列 (使 用 “ui-grid-b” CSS 类 ) 。 
@ ”四 列 (使 用 “ui-grid-c” CSS 类 ) 。 
@ 五 列 (使 用 “ui-grid-d” CSS 类 ) 。 


通常 ， 网 格 是 全 部 100% 的 宽度 ， 页 面 中 看 不 到 边界 和 背景 ， 也 没有 “margin ”和 
“padding” 内 外 边 距 属性 ， 所 以 也 就 不 会 影响 将 页 面 元 素 放置 网 格 内 部 后 的 CSS 样式 。 在 网 格 
容器 中 ， 每 个 子 元 素 分 配 “ui-block-alblcld”CSS 样式 且 以 浮动 方式 、 连 续 布局 在 每 个 <div> 层 
内 ， 并 最 终 形成 网 格 布局 。 

下 面 我 们 具体 看 一 下 使 用 jQuery Mobile 网 格 布局 的 代码 〈 对 应 源 代码 jqmGrid 目录 中 的 
jqmGrid.html 文件 )。 


【代码 10-23】 
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关于 代码 的 具体 分 析 如 下 : 


第 02 一 07 行 代码 使 用 “ui-grid-a”CSS 样式 定义 了 一 个 两 列 网 格 ， 第 04 行 ui-bar-a 与 第 05 
行 代码 使 用 “ui-blocka” 和 “ui-block-b”CSS 样式 定义 了 内 部 的 层 容器 ， 并 在 每 个 容器 内 部 使 
用 “ui-bar” 定 义 了 工具 条 。 

第 09 一 14 行 代码 同样 使 用 “ui-grid-a”CSS 样式 定义 了 一 个 两 列 网 格 ， 不 同 之 处 是 在 每 个 层 
容器 内 部 使 用 <input> 标 签 元 素 定义 了 按钮 。 

第 16 一 22 行 代码 与 第 02 一 07 行 代码 类 似 ， 但 使 用 “ui-grid-b”CSS 样式 定义 了 一 个 三 列 网 
格 工具 条 。 

第 24 一 29 行 代码 与 第 09 一 14 行 代码 类 似 ， 但 使 用 “ui-grid-b”CSS 样式 定义 了 一 个 三 列 网 
格 按钮 。 

运行 jqmGrid.html， 页 面 效 果 如 图 10.35 所 示 。 


可 Grids -jQuery Mobile .. Xx 
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10.35 ”网 格 布局 效果 (1) 
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由 于 页 面 限制 ,【 代 码 10-22】 中 仅仅 列举 了 两 列 和 三 列 网 格 布局 ， 在 jqmGrid.html 文档 中 
还 包含 四 列 与 五 列 网 格 布局 的 代码 ， 读 者 可 以 自行 测试 。 

如 果 想 设计 类 似 表格 〈table) 的 网 格 布局 ， 可 以 使 用 jQuery Mobile 网 格 布局 来 进行 设计 
(对 应 源 代码 jqmGrid 目录 中 的 jqmGrid.html 文件 )。 


【代码 10-24】 





关于 代码 的 具体 分 析 如 下 : 

第 01 行 代码 使 用 “ui-grid-b”CSS 样式 定义 了 一 个 三 列 网 格 。 

第 02 一 10 行 代码 同样 使 用 “ui-block-a”“ui-block-b” 和 “ui-block-c”3 个 CSS 样式 连续 定 
义 了 3 行 工具 条 。 这 样 第 01 一 11 行 代码 就 构成 了 一 个 类 似 表 格 (table》 的 网 格 布局 。 

运行 jqmGrid.html， 页 面 效 果 如 图 10.36 所 示 。 


Grids-jQuery Mobile.. X + 
€ OD localhost63342/jqm/jq 7 辕 器 钙 © 





Multiple row grids 








图 10.36 网 格 布局 效果 (2) 
如 果 想 设计 类 似 单列 的 网 格 布局 ， 也 可 以 使 用 jQuery Mobile 设计 单列 网 格 布局 的 方法 (对 
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应 源 代 码 jqamGrid 目录 中 的 jqmGrid.html 文件 )。 
【代码 10-25】 





从 代码 中 可 以 看 到 ， 第 06 行 代 码 使 用 “ui-grid-solo”CSS 样式 定义 了 一 个 单列 网 格 ， 其 他 
定义 方法 与 【代码 10-23】 和 【代码 10-24】 是 一 致 的 。 
运行 jqmGrid.html， 页 面 效 果 如 图 10.37 所 示 。 





图 10.37 网 格 布局 效果 (3) 


1 0.4 jQuery Mobile 小 部 件 


本 节 我 们 继续 介绍 jQuery Mobile 框架 的 小 部 件 。 小 部 件 这 个 概念 是 随 着 前 端 框架 的 流行 而 
出 现 的 ， 简 单 地 可 以 理解 为 HTML 页 面 元 素 ， 只 不 过 经 是 过 研发 人 员 的 开发 升级 包装 为 功能 强 
大 的 页 面 组 件 提供 给 了 设计 人 员 使 用 。 本 节 介绍 的 小 部 件 包 括 工具 条 、 导 航 条 、 选 项 卡 、 面 板 和 
列表 视图 等 ， 内 容 比 较 丰 富 。 


10.4.1 工具 条 
工具 条 是 前 端 框架 中 非常 重要 的 一 个 小 部 件 ，jQuery Mobile 框架 专门 针对 移动 设备 的 特点 
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对 工具 条 进行 了 定制 开发 。 在 jQuery Mobile 框架 中 ， 内 置 了 标准 、 固 定 、 外 部 等 多 种 类 型 的 工 


具 条 ， 为 设计 人 员 开发 移动 应 用 提供 了 多 种 选择 。 
首先 ， 我 们 看 一 个 使 用 jQuery Mobile 标准 工具 条 的 代码 〈 对 应 源 代 码 jqmToolbar 目录 中 的 


jqmToolbarBasic.html 文件 )。 


【代码 10-26】 





关于 代码 的 具体 分 析 如 下 : 

整个 第 01 一 12 行 代码 使 用 “data-role="page"” 属 性 定义 了 一 个 “page ”页面 。 
第 02 一 05 行 代码 使 用 “data-role="header"” 属 性 定义 了 页 面 的 头 部 工具 条 。 
第 09 一 11 行 代码 使 用 “data-role="footer "” 属 性 定义 了 页 面 的 底部 工具 条 。 
运行 jqmToolbarBasic.html， 页 面 效 果 如 图 10.38 所 示 。 


€ © localhost:63342/jqm， 转 C 
< Toolbar header 





Toolbar | 工具 条 


Toolbar footer 








图 1038 标准 工具 条 效果 


从 图 10.38 的 页 面 效果 可 以 看 到 ， 工 具 条 正确 显示 出 来 了 ， 但 感觉 怪 怪 的 。 仔 细 观 察 后 发 
现 ， 底 部 工具 条 位 置 不 对 ， 正 常 应 该 固定 在 页 面 底部 。 
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没关系 ，jQuery Mobile 框架 为 设计 人 员 考 虑 到 这 一 点 了 ， 我 们 继续 看 一 个 使 用 jQuery 
Mobile 固定 工具 条 的 代码 (对 应 源 代码 jqmToolbar 目录 中 的 jqmToolbarFixed.html 文件 )。 


【代码 10-27】 





【代码 10-27] 与 【代码 10-26】 基 本 类 似 ， 唯 一 不 同 的 地 方 是 第 02 行 与 第 09 行 代码 定义 
的 工具 条 中 增加 了 “data-position="fixed"” 属 性 ， 该 属性 的 功能 就 是 将 工具 条 位 置 进行 了 固定 。 
运行 jqmToolbarFixed.html， 页 面 效果 如 图 10.39 所 示 。 


Toolbar Fixed header x 


和 localhost63342/jqm/jqmT* 辕 躁 CC » 三 


< Toolbar Fixed header 


Toolbar Fixed | 固定 工具 条 








Toolbar Fixed footer | 
10.39 ”固定 工具 条 效果 


从 图 10.39 的 页 面 效 果 可 以 看 到 ， 底 部 工具 条 的 位 置 固 定 在 页 面 底 部 了 ， 这 样 看 上 去 就 舒服 
多 了 。 

jQuery Mobile 框架 还 为 设计 人 员 提 供 了 一 种 外 部 工具 条 ， 下 面 我 们 看 一 下 使 用 外 部 工具 条 
的 代码 (对 应 源 代码 jqmToolbar 目录 中 的 jqmToolbarExternalhtml 文件 )。 
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【代码 10-28】 





【代码 10-28】 与 前 面 的 【代码 10-26】 和 【代码 10-27】 在 页 面 结构 上 发 生 了 变化 ， 第 01 一 
03 行 代码 定义 的 头 部 工具 条 与 第 11 一 13 行 代码 定 义 的 底部 工具 条 在 第 05 一 10 行 代码 定义 的 
“data-role="page"” 页 面 外 部 ， 而 【代码 10-26】 和 【代码 10-27】 定 义 的 工具 条 均 是 在 “data- 
role="page"” 页 面 内 部 【代码 10-28】 工 具 条 的 定义 方法 就 是 jQuery Mobile 框架 的 外 部 工具 
条 。jQuery Mobile 框架 提供 外 部 工具 条 的 功能 是 为 了 设计 多 页 面 共用 一 个 工具 条 的 移动 应 用 。 
运行 jqmToolbarExternalhtml， 页 面 效果 如 图 10.40 所 示 。 


和 中 localhost63342 出 器 C Qa » | 三 


< External Header Toolbar 





External Toolbars Page 


外 部 工具 条 





External Footer Toolbar | 外 部 工具 条 


图 10.40 外 部 工具 条 效果 








10.4.2 “导航 条 
jQuery Mobile 框架 同样 针对 移动 设备 的 特点 设计 了 一 种 导航 条 ， 导 航 条 允许 添加 1-5 个 按钮。 
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首先 ， 我 们 看 一 个 使 用 jQuery Mobile 导航 条 的 代码 〈 对 应 源 代 码 jqmNavbar 目录 中 的 
jqmNavbarhtml 文件 )。 


【代码 10-29】 
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关于 代码 的 具体 分 析 如 下 : 

第 04 一 08 行 代码 使 用 “data-role="navbar"” 属 性 定义 了 一 个 单 按钮 导航 条 。 

第 12 一 17 行 代码 使 用 “data-role="navbar"” 属 性 定义 了 两 个 按钮 导航 条 ， 并 在 第 15 行 代码 
使 用 “"ui-btn-active"”CSS 样式 定义 了 活动 状态 按钮 。 

第 21 一 27 行 代码 使 用 “data-role="navbar"” 属 性 定义 了 3 个 按钮 导航 条 ， 并 在 第 25 行 代码 
使 用 “"ui-btn-active"”CSS 样式 定义 了 活动 状态 按钮 。 

第 31 一 38 行 代码 使 用 “data-role="navbar'"” 属 性 定义 了 4 个 按钮 导航 条 ， 同 时 使 用 “data- 
grid="c"” 属 性 定义 了 四 列 网 格 布局 ， 并 在 第 34 行 代码 使 用 “"ui-btn-active"”CSS 样式 定义 了 活 
动 状态 按钮 。 

第 42 一 40 行 代 码 使 用 “data-role="navbar"” 属 性 定义 了 5 个 按钮 导航 条 ， 同 时 使 用 “data- 
grid="d"” 属 性 定义 了 五 列 网 格 布局 ， 并 在 第 44 行 代码 使 用 “"ui-btn-active"”CSS 样式 定义 了 活 
动 状态 按钮 。 

运行 jqmNavbar.html， 页 面 效 果 如 图 10.41 所 示 。 


Navbar-jQueryy M.. X 十 


所 DD localhost:63342/jqr 辕 器 争 C 





Navbar basics | 


Navbars with 1 item will render as 100% wide. 


TAN item will automatical ES 
the width of the browser window 


One Two Three 
Adding a fourth more item will automatically make each 
button 1/4 the width of the browser window- 


One Two Three Four 
The navbar maxes Out with 5 items, each 1/5 the width of the 
browser window: 


ES Two Three Four Five 
v 


图 10.41 导航 条 效果 (1) 
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下 面 我 们 看 一 个 相对 复杂 一 点 、 使 用 jQuery Mobile 导航 条 的 代码 (对 应 源 代码 jqmNavbar 
目录 中 的 jqmNavbar.html 文件 )。 


【代码 10-30】 





关于 代码 的 具体 分 析 如 下 : 

第 01 一 14 行 代码 使 用 “data-role="header"” 属 性 定义 了 一 个 页 面 头 部 。 

第 02 一 04 行 代码 定义 了 一 个 头 部 标题 和 两 个 按钮 ， 且 这 两 个 按钮 分 别 定位 在 左右 两 侧 。 

第 05 一 13 行 代码 使 用 “data-role="navbar"” 属 性 定义 了 5 个 按钮 导航 条 ， 并 在 第 07 行 代码 
使 用 “"ui-btn-active"”CSS 样式 定义 了 活动 状态 按钮 。 

运行 jqmNavbar.html， 页 面 效 果 如 图 10.42 所 示 。 


可 Navbar -jQuery MX 





€ OD localhost63342/jqn 辐 器 口 C » 


Navbars in headers 站 





Own Navbar header © setting 


| ~ … … 六 


Top 和 








10.42 ”导航 条 效果 (2) 


最 后 ， 我 们 看 一 个 使 用 图 标的 jQuery Mobile 导航 条 代码 (对 应 源 代码 jqmNavbar 目录 中 的 
jqmNavbar.html 文件 )。 


【代码 10-31】 
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这 里 使 用 “data-icon” 属 性 定义 了 导航 条 图 标 。 同 时 在 第 02 行 代码 中 使 用 “data-iconpos” 
定义 了 导航 条 图 标的 位 置 ， 图 标的 位 置 可 以 是 “bottom” “left” “right” 和 “top”。 

运行 jqmNavbar.html， 页 面 效 果 如 图 10.43 所 示 ， 显 示 了 “bottom” “left” 和 “right”3 种 
图 标 位 置 。 


加 Naevbar-jauey M X 十 
sO) 


This will result in a bottom icon alignment: 


Summary Favs Setup 


The icon position can be set to data-iconpos="left"- 


© sy EO -…。 
Or the icon position can be set to data-iconpos="right"- 


ss OE …。o 


Top 和 
v 








图 10.43 导航 条 效果 (3) 


10.4.3 ”选项 卡 


这 一 小 节 我 们 介绍 jQuery Mobile 框架 为 移动 设备 设计 的 选项 卡 。jQuery Mobile 框架 通过 导 
航 条 和 列表 视图 两 种 方式 来 实现 选项 卡 。 

首先 ， 我 们 看 一 下 使 用 jQuery Mobile 导航 条 实现 选项 卡 的 代码 (对 应 源 代码 jqmTabs 目录 
中 的 jqmTabs.html 文件 )。 


【代码 10-32】 


275 


构建 移动 网 站 与 APP: HTML 5 移动 开发 入 门 与 实战 





关于 代码 的 具体 分 析 如 下 : 

第 01 行 代码 使 用 “data-role="tabs"” 属 性 定义 了 一 个 选项 卡 。 

第 02 一 08 行 代码 使 用 “data-role="navbar"” 属 性 定义 了 一 个 导航 条 ， 用 作 选 项 卡 的 按钮 标 
签 ， 第 03 一 07 行 代 码 使 用 <ul><li> 列 表 标 签 分 别 定义 了 3 个 选项 卡 按钮 。 

第 09 一 11 行 代码 定 义 了 第 一 个 选项 卡 内 容 ， 其 id 值 为 “tabOne”， 与 第 04 行 代码 <a> 超 链 
接 中 定义 的 “href” 属 性 值 相对 应 。 

第 12 一 20 行 代码 定义 了 第 二 个 选项 卡 内 容 ， 其 id 值 为 “tabTwo”， 与 第 05 行 代码 <a> 超 链 
接 中 定义 的 “href” 属 性 值 相对 应 。 其 中 ， 第 13 一 19 行 代码 通过 一 个 列表 视图 定义 了 第 二 个 选 
项 卡 的 具体 内 容 。 

第 06 行 代码 <a> 超 链接 中 定义 的 “href” 属 性 值 〈 对 应 源 代码 jqmTabs 目录 中 的 tab-ajax- 
content.html 文档 ) 表明 第 三 个 选项 卡 的 内 容 是 通过 Ajax 方式 链接 的 HTML 文档 内 容 。 

运行 jqmTabs.html 的 3 个 选项 卡 程序 ， 页 面 效 果 如 图 10.44、 图 10.45 和 图 10.46 所 示 。 在 图 
10.46 中 ， 选 项 卡 的 内 容 是 通过 Ajax 方式 链接 到 tab-ajax-contenthtml 文档 中 定义 的 内 容 。 











€ 四 jlocalhost63342/Webstol 回 跨 /i€ » 三 € localhost63342/Websto 7 国 器 CC » 三 
Tabs 
Tabs 
Use navbar for tabs 
Use navbar for tabs 
tabOne tabTwo tabAjax 
| 
日 © 
tabOne contents < © 
p © 
E © 
Copyright 2016 by king Copyright 2016 by king 

















图 10.44 导航 条 式 选项 卡 效果 (1) 图 10.45 “导航 条 式 选项 卡 效果 (2) 
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| nea 


€ © localhost63342/Webstol* 辐 躁 JC » 三 








Tabs 
Use navbar for tabs 


tabOne tabTwo tabAjax 





This is an ajax tab contents. 


Copyright 2016 by king 


图 10.46 ”导航 条 式 选 项 卡 效果 (3) 


下 面 我 们 再 使 用 列表 视图 来 实现 选项 卡 的 代码 (对 应 源 代码 jqmTabs 目录 中 的 jqmTabs.html 
文件 )。 


【代码 10-33】 














关于 代码 的 具体 分 析 如 下 : 
第 01 行 代码 使 用 “data-role="tabs"” 属 性 定义 了 一 个 选项 卡 。 
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第 02 一 06 行 代码 的 <ul> 标 签 中 使 用 “data-role="listview"” 属 性 定义 了 一 个 列表 视图 ， 用 作 
选项 卡 的 按钮 标签 ， 第 03 一 05 行 代码 使 用 <I 记 标签 分 别 定 义 了 3 个 选项 卡 按钮 。 

第 07 一 16 行 代码 的 内 容 与 【代码 10-32】 中 定义 的 内 容 基 本 类 似 。 

再 次 运行 jqmTabs.html 中 的 3 个 选项 卡 程序 ， 页 面 效 果 如 图 10.47、 图 10.48 和 图 10.49 所 示 。 


em 和 


®t Tabs - jQuery Mobile D-… X 

ee € 加 iocalhost63342/Web 加 跟 CC Qano<cmr> 2 三 
€ 四 localhost63342/Web 四 跟 | C Q8sno<anrk> 了 三 
Tabs 


Tabs 
Use inset listview for tabs 


Use inset listview for tabs 


insetTabone A 

insetTabone 人 CinsetTabOne contents 记 
msetnabrw 人 
Db 

E 


insetTabAjax O 


Sooooo 








Copyright 2016 by king Copyright 2016 by king 


图 10.47 列表 视图 式 选项 卡 效果 (1) 图 10.48 ”列表 视图 式 选项 卡 效果 (2) 


tH Tabs - jQuery Mobie D... X 


€ 四 | localhost63342/Web 辕 品 /© QBngcnih> » 三 











Tabs 


Use inset listview for tabs 


insetrabone 赔 
GE 


This is an ajax tab contents. 








Copyright 2016 by king 


10.49 列表 视图 式 选项 卡 效果 (3) 


10.4.4 面板 


在 目前 的 移动 应 用 中 ， 面 板 的 使 用 越 来 越 流行 了 。 这 一 小 节 我 们 将 介绍 jQuery Mobile 框架 


为 移动 开发 而 设计 的 面板 (Panel)。 
下 面 我 们 看 一 段 使 用 jQuery Mobile 面板 (Panel) 的 代码 〈 对 应 源 代码 jqmPanel 目录 中 的 


jqmPanel.html 文件 )。 
【代码 10-34】 


278 


第 10 章 jQuery Mobile 移动 框架 





构建 移动 网 站 与 APP: HTML 5 移动 开发 入 门 与 实战 





关于 代码 的 具体 分 析 如 下 : 

第 20 一 48 行 代码 使 用 “data-role="panel"” 属 性 分 别 定义 了 6 个 面板 (Panel)， 其 中 包括 3 
个 左 侧面 板 〈data-position="left") 与 3 个 右 侧 面板 (data-position="right")。 另 外 ， 使 用 “data- 
display” 属 性 定义 面板 的 动画 效果 。 

第 07 一 09 行 代码 定义 了 一 组 〈 共 3 个 ) <a> 超 链接 ， 用 于 打开 左 侧 3 个 面板 。 

第 12 一 14 行 代码 也 定义 了 一 组 〈 共 3 个 ) <a> 超 链接 ， 用 于 打开 右 侧 3 个 面板 。 

下 面 我 们 看 一 下 激活 面板 的 脚本 代码 〈 对 应 源 代码 jqmPanel 目录 中 的 jqmPaneLhtml 文件 )。 


【代码 10-35】 





第 03 行 代码 通过 “data-role=panel” 属 性 来 筛选 面板 元 素 ， 并 使 用 panel() 方 法 激活 面板 。 
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运行 jqmPanel.html， 页 面 效 果 如 图 10.50 所 示 。 我 们 尝试 点 击 图 10.50 中 的 按钮 ， 页 面 效 果 
如 图 10.51 和 图 10.52 所 示 。 





x - oOo Xx| 
Edernalp.. X + Edemalp. x 证 
localhost63342“ 辐 跟 C 


D localhost63342 国 晤 CC » 


Left Panel: Overlay 
Left panel examples | 左 侧面 板 


Close panel 
Overlay Reveal push 





Right panel examples | 右 便 面板 


Overlay Reveal Push 








Copyright 2016 by king 











图 10.50 面板 效果 (1) 图 10.51 面板 效果 (2) 


= 0 
Exermalp.. X 十 


ylocalhost 4 加 器 C 


» 三 


Right Panel: Overlay 


Left panel @ 


Overlay 


Right pane| 


Overlay 





图 10.52 面板 效果 (3) 
10.4.5 ”弹出 框 


jQuery Mobile 框架 设计 了 一 类 称 为 弹出 框 (Popup) 的 小 部 件 ， 有 点 类 似 于 传统 的 工具 提 
示 ， 但 内 容 丰 富 了 不 少 ， 功 能 也 更 为 强大 。 下 面 我 们 详细 介绍 。 


第 一 段 使 用 jQuery Mobile 弹出 框 (Popup) 的 代码 〈 对 应 源 代 码 jqmPopup 目录 中 的 
jqmPopup.html 文件 ) 如 下 : 
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【代码 10-36】 





第 03 行 代码 定义 了 一 个 超 链 接 ， 通 过 “href” 属 性 打开 一 个 id 值 为 "popupBasic" 的 弹出 框 。 
第 04 一 06 行 代码 使 用 “data-role="popup"” 属 性 定义 了 一 个 id 值 为 "popupBasic" 的 弹出 框 ， 第 05 
行 代码 定义 的 是 弹出 框 中 输出 的 内 容 。 

运行 jqmPopup.html， 页 面 效果 如 图 10.53 所 示 。 


DD Popup -jQ… xX 
所 四 localhost63: 加 跟 团 C 


Popup basics 
This is a completely basic popup. 


图 10.53 ”弹出 框 效果 (1) 


第 二 段 使 用 jQuery Mobile 弹出 框 的 代码 (对 应 源 代码 jqmPopup 目录 中 的 jqmPopup.html 文 
件 ) 如 下 : 


【代码 10-37】 
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第 03 行 代码 定义 了 一 个 超 链接 ， 通 过 “href” 属 性 打开 一 个 id 值 为 "popupTooltip" 的 弹出 
框 。 第 04 一 06 行 代码 使 用 “data-role="popup"” 属 性 定义 了 一 个 id 值 为 "popupTooltip" 的 工具 条 
弹出 框 (Popup)， 第 05 行 代码 定义 的 是 弹出 框 中 输出 的 内 容 。 

运行 jqmPopup.html， 页 面 效 果 如 图 10.54 所 示 。 


加 popup -jQuery Mobil... X 
所 加 localhost63342/Webs 国足 团 | C 








图 10.54 ”弹出 框 效果 (2) 


第 三 段 使 用 jQuery Mobile 弹出 框 的 代码 (对 应 源 代 码 jqmPopup 目录 中 的 jqmPopup.html 文 
件 ) 如 下 : 


【代码 10-38】 
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第 03 一 05 行 代码 定义 了 一 组 ( 共 3 个 ) 超 链 接 ， 通 过 “href” 属 性 打开 指定 id 值 的 弹出 
框 。 第 06 一 15 行 代码 使 用 “data-role="popup"” 属 性 定义 了 一 组 ( 共 3 个 ) id 值 为 指定 值 的 图 片 
弹出 框 。 

运行 jdamPopup.html， 图 片 弹出 框 效果 如 图 10.55 所 示 。 





+ hr 昌 惠 口 = agree ERE 


图 10.55 弹出 框 效果 (3) 


1 0 e 5 jQuery Mobile 表单 


本 节 我 们 继续 介绍 jQuery Mobile 框架 的 表单 ， 包 括 输入 框 、 单 选 按 钮 、 复 选 框 、 下 拉 列 表 
框 、 滑 块 控件 等 内 容 。jQuery Mobile 框架 为 设计 人 员 开 发 的 表单 能 够 完美 适应 移动 应 用 开发 的 
场景 ， 是 目前 最 先进 的 前 端 框架 应 用 之 一 。 


10.5.1 输入 框 


表单 (Forms) 中 的 输入 框 是 最 基本 的 元 素 。jQuery Mobile 框架 设计 了 一 系列 针对 移动 应 用 
的 输入 框 类 型 ， 基 本 能 够 满足 常规 移动 应 用 的 开发 。 下 面 我 们 具体 介绍 jQuery Mobile 框架 中 的 
输入 框 ( 对 应 源 代码 jqmForms 目录 中 的 jqmFornms.html 文件 )。 
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【代码 10-39】 


关于 代码 的 具体 分 析 如 下 : 
第 04 行 代码 通过 “type="text"” 属 性 定义 了 一 个 普通 输入 框 。 
第 08 行 代码 通过 <textarea> 标 签 定 义 了 一 个 文本 域 ,“cols” 属 性 用 于 定义 列 宽 ，“rows” 
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性 用 于 定义 行 高 。 

第 12 行 代码 通过 “type="number"” 属 性 定义 了 一 个 数字 输入 框 ,“pattern="[0-9]*"” 属 性 用 
于 定义 正则 表达 式 规则 ， 表 示 数 字 输 入 框 仅 支持 输入 数字 。 

第 16 行 代码 通过 “type="date"” 属 性 定义 了 一 个 日 期 输入 框 。 

第 20 行 代码 通过 “type="tel"” 属 性 定义 了 一 个 电话 号 码 格式 输入 框 。 

第 24 行 代码 通过 “type="search"” 属 性 定义 了 一 个 搜索 输入 框 ,“placeholder” 属 性 值 为 默 
认 提 示 信 息 。 

第 28 行 代码 通过 “type="file"” 属 性 定义 了 一 个 文件 输入 框 。 

第 32 行 代码 通过 “type="password"” 属 性 定义 了 一 个 密码 输入 框 。 

运行 jqmForms.html， 页 面 效 果 如 图 10.56 所 示 。 


加 Form elements -jQuery.. 头 


外 加 localho 四 品 加 C QBing<Crik: » 三 





Text inputs & Textareas | 


Teoinpur 
Hello! jQuery Mobile 
Textarea; 


Textarea 


Number + [0-9F pattern: 


File: 


| 浏 临 -，| 未 选择 文件 , 


Daseworcd 








ER | 


图 10.56 输入 框 效果 





10.5.2 ” 复 选 框 


复 选 框 也 是 表单 Forms〉 中 比较 常用 的 元 素 。jQuery Mobile 框架 也 设计 了 一 系列 针对 移动 
应 用 的 复 选 框 类 型 来 支持 常规 移动 应 用 的 开发 。 下 面 我 们 具体 介绍 jQuery Mobile 框架 中 的 复 选 
框 (对 应 源 代码 jqmForms 目录 中 的 jqmForms.html 文件 )。 


【代码 10-40】 
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关于 代码 的 具体 分 析 如 下 : 


第 02 一 27 行 代码 中 ， 全 部 复 选 框 均 通过 “type="checkbox"” 属 性 来 定义 。 
第 02 一 16 行 代码 中 定义 了 一 组 常规 垂直 排列 的 复 选 枉 ， 默 认 选 中 的 复 选 框 是 通过 增加 
“checked” 属 性 来 实现 的 。 
第 17 一 27 行 代码 中 定义 了 一 组 水 平 排列 的 复 选 框 。 水 平 排列 是 通过 第 18 行 代码 中 的 “data- 
type="horizontal" ”属性 来 实现 的 。 
运行 jqamFormshtml， 页 面 效果 如 图 10.57 所 示 。 


所 @ilocalho 可 中 加 CC Abing<Cwrk: 3 三 





Checkboxes 的 


Checkboxes, vertical controlgroup: 
四 ^ 图 


tw 


Checkboxes, mini, horizontal controlgroup: 


b u 
10.57 复 选 框 效果 
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10.5.3” 单 选 按钮 


10.5.2 小 节 我 们 介绍 了 复 选 框 ， 本 小 节 我 们 介绍 一 下 单 选 按钮 。 下 面 我 们 看 一 段 使 用 jQuery 
Mobile 框架 单 选 按 钮 的 代码 (对 应 源 代码 jqmForms 目录 中 的 jqmForms.html 文件 )。 


【代码 10-41】 
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关于 代码 的 具体 分 析 如 下 : 

第 02 一 27 行 代码 中 ， 全 部 单 选 按钮 均 通过 “type="radio"” 属 性 来 定义 。 

第 02 一 16 行 代码 中 定义 了 一 组 常规 垂直 排列 的 单 选 按钮 ， 默 认 选 中 的 单 选 按钮 是 通过 增加 
“checked” 属 性 来 实现 的 。 

第 17 一 27 行 代码 中 定义 了 一 组 水 平 排列 的 单 选 按钮 。 水 平 排列 是 通过 第 18 行 代码 中 的 
“data-type="horizontal"” 属 性 来 实现 的 。 

运行 jamForms.html， 页 面 效果 如 图 10.58 所 示 。 


#3 Form elements - jQuery- X 
Dllocalho 辐 躁 外 C QQ Bing<Crk:> » 三 








Radio buttons 


Radio buttons, vertical controlgroup: 
Oa 


B 
D 
E 
Radio buttons, mini, horizontal controlgroup: 


:EE 


10.58 单 选 按钮 效果 








10.5.4 下 拉 列 表 框 


本 小 节 我 们 介绍 下 拉 列 表 框 。 下 面 我 们 看 一 段 使 用 jQuery Mobile 框架 下 拉 列 表 框 的 代码 
(对 应 源 代码 jqmForms 目录 中 的 jqmForms.html 文件 )。 


【代码 10-42】 
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关于 代码 的 具体 分 析 如 下 : 

在 第 02 一 29 行 代码 中 ， 全 部 下 拉 列 表 框 均 是 通过 <select> 和 <option> 标 签 来 定义 的 。 

第 04 一 09 行 代码 定义 了 一 个 常规 的 下 拉 列 表 框 。 

第 13 一 18 行 代码 定义 了 一 个 内 联 式 的 下 拉 列 表 框 ， 具 体 是 通过 第 13 行 代码 中 的 “data- 
inline="true"” 属 性 来 实现 的 。 


第 22 一 28 行 代码 定义 了 一 个 菜单 式 的 下 拉 列 表 框 ， 具 体 是 通过 第 22 行 代码 中 的 “data- 
native-menu="false"”” 属 性 来 实现 的 。 

运行 jqmForms.html， 页 面 初始 效果 如 图 10.59 所 示 。 依 次 测试 页 面 中 的 3 个 下 拉 列 表 框 ， 
效果 如 图 10.60、 图 10.61 和 图 10.62 所 示 。 





可 Form elements - jQuery.. X 可 Form elements - jQuery.. X 




















€ $0loc DOe Aan » 三 | |€$Dloc DROe QBngck » 三 
Selects | 下 拉 列表 框 ”十 | seleas | 下 拉 列 表 框 四 
Select native menu Select native menu 
Standard: 7 day © Standark 7 day an 

Mini select, inline Standard: 7 

standard:7dav 同 Express: ot dey 
Custom select menu: 一 一 一 一 

10.59 下 拉 列 表 框 效果 (1) 10.60 下拉 列 表 框 效果 (2) 
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可 Form elements - jQuery.. X 
€ 3| Olloca 四 器 外 |C QQ Bing <ComrAe 
Selects | 下 拉 列 表 框 


Select native menu 


所 jlocalhost6 国 噪 © Qasno<ccmre 2 三 

















Standard: 7 day © 
Mini select, iniine 
| standard: 7dav @) 
Standard: 7 day 
Rush: 3 
menu example © 
Overnight 6 a 
图 10.62 下拉 列表 框 效果 (4) 





10.61 下 拉 列 表 框 效果 (3) 


10.5.5“ 滑 块 控件 
本 小 节 我 们 介绍 滑 块 控件 。 下 面 我 们 看 一 段 使 用 jQuery Mobile 框架 滑 块 控件 的 代码 (对 应 
源 代码 jqmForms 目录 中 的 jqmForms.html 文件 )。 


【代码 10-43】 
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关于 代码 的 具体 分 析 如 下 : 

第 02 一 09 行 代码 中 定义 了 两 个 滑 块 控件 ， 均 是 通过 使 用 “type="range"” 属 性 来 定义 的 。 另 
外 ， 需 要 使 用 “min”“max” 和 “step” 属 性 来 定义 区 间 最 小 值 、 区 间 最 大 值 和 步 长 值 。 

第 13 一 18 行 代码 中 定义 了 一 个 区 间 滑 块 控件 ， 在 使 用 “type="range"” 属 性 定义 的 基础 上 ， 
同时 在 第 13 行 代码 中 增加 了 “data-role="rangeslider"” 的 定义 。 定 义 区 间 滑 块 控件 时 ， 需 要 同时 
使 用 两 个 <input type="range"> 标 签 来 定义 区 间 滑 块 的 上 下 区 间 值 ， 本 例 是 通过 第 15 行 和 第 17 行 
代码 实现 的 。 

第 23 一 28 行 代码 同样 定义 了 一 个 区 间 滑 块 控件 ， 与 第 13 一 18 行 代码 的 定义 不 同 的 是 第 23 
行 代码 增加 了 “data-mini="true"” 属 性 ， 表 明 其 是 一 个 mini 类 型 的 区 间 滑 块 控件 。 

运行 jqmForms.html， 页 面 初始 效果 如 图 10.63 所 示 。 


可 Form elements -jQuery X 
和 专 中 四 local 辕 吕 加 C@ Qasnoc<cmk 2 三 


~ 





Sliders 
Slider: 
50 周 
Slider with fill and step of 50: 
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10.63 ” 滑 块 控件 效果 
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10.6 本 章 小 结 


本 章 我 们 向 读者 介绍 了 jQuery Mobile 框架 的 相关 内 容 ， 包 括 如 何 搭建 jQuery Mobile 框架 开 
发 平台 、 如 何 使 用 jQuery Mobile 框架 开发 移动 应 用 的 方法 ， 希 望 这 些 内 容 能 够 对 读者 进一步 学 
习 jQuery Mobile 框架 有 所 帮助 。 
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第 11 章 
4Sencha Touch 框 架 > 


本 章 将 介绍 目前 非常 流行 的 Sencha Touch 框架 。 可 以 这 样 讲 ，Sencha Touch 是 专 为 移动 设备 
应 用 开发 而 生 的 JavaScript 框架 。 设 计 人 员 基 于 Sencha Touch 框架 创建 出 来 的 Web APP 与 Native 
APP 的 风格 高 度 相 似 ， 其 用 户 界面 组 件 和 数据 管理 全 部 基于 HTML 5 和 CSS 3 的 行业 标准 ， 且 
全 面 兼 容 Windows、Android 和 Apple iOS 等 主流 平台 。 

本 章 会 向 读者 介绍 Sencha Touch 框架 的 基本 特点 、 开 发 原理 与 使 用 方法 ， 同 时 还 配 有 有 具体 
案例 。 


初步 接触 Sencha Touch 


本 节 我 们 先 向 读者 初步 介绍 一 下 Sencha Touch 框架 的 基本 概况 及 使 用 方法 ， 在 后 面 的 小 节 
中 我 们 会 在 此 基础 上 进行 更 深入 的 讲解 ， 以 帮助 读者 循序 渐进 地 掌握 Sencha Touch 框架 的 特性 
及 应 用 方法 。 


11.1.1 Sencha Touch 框架 特点 


如 果 说 起 Sencha Touch 框架 ， 大 部 分 读者 可 能 会 比较 陌生 ;如果 提 到 大 名 易 易 的 ExtJS 框 
架 ， 读 者 一 定 会 产生 共鸣 。 可 以 讲 ，ExtUS 是 基于 JavaScript 语言 编写 的 非常 优秀 的 Ajax 框架 ， 
而 Sencha Touch 就 是 在 ExtJS 框架 基础 上 ， 同 时 整合 了 JQTouch 与 Raphal 开发 库 推 出 的 第 一 
个 基于 HTML 5 的 Mobile APP 开发 框架 。 

设计 人 员 基 于 Sencha Touch 框架 可 以 开发 出 构建 在 iOS、Android 和 Windows Mobile 等 平台 
上 运行 的 移动 Web 应 用 ， 且 效果 看 起 来 如 同 本 地 应 用 一 样 。 同 时 ， 随 着 Sencha Touch 框架 的 不 
断 升级 完善 ，Sencha 开发 团队 还 推出 了 Sencha Cmd、Sencha Test 和 Sencha Platform 等 工具 来 提 
高 开发 效率 。 目 前 Sencha 作为 一 个 独立 的 品牌 在 移动 互联 网 应 用 开发 中 占据 了 非常 重要 的 地 
位 。 

下 面 我 们 简要 介绍 一 下 Sencha 官方 所 总 结 的 、 关 于 Sencha Touch 框架 的 一 些 显著 特性 。 


@ 完全 基于 最 新 的 HTML 5、CSS 3、JavaScript 等 Web 标准 ， 整 个 库 在 压缩 和 gzip 后 大 
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约 为 80KB， 通 过 禁用 一 些 组 件 还 会 使 其 体积 更 小 。 

@ “全面 兼容 Android、iOS 和 Windows 等 移动 平台 ， 而 且 Android 平台 上 的 开发 人 员 还 可 
以 使 用 一 些 专 为 Android 定制 的 主题 。 

@ ”支持 增强 的 触摸 事件 ， 在 touchstart、touchend 等 标准 事件 基础 上 增加 了 一 组 自 定义 事 
件数 据 集成 (如 tap、swipe、pinch、rotate 等 ) 。 

@ ”提供 了 强大 的 数据 集成 功能 ， 通 过 Ajax、JSONp、YQL 等 方式 绑 定 到 组 件 模板 ， 同 时 
可 写 入 本 地 离线 存储 。 


必 寺 Sencha 官方 文档 的 地 址 为 https://docs.sencha.com/ 。 | 


总 而 言 之 ，Sencha Touch 框架 是 当前 非常 强大 的 移动 平台 框架 。 随 着 Sencha Touch 框架 的 不 
断 完善 ， 移 动 平台 上 的 Web APP 用 户 体验 设计 会 得 到 不 断 提 升 。 同 时 ， 随 着 HTML 5 与 CSS 3 
技术 的 日 趋 完善 ， 未 来 的 移动 应 用 主流 会 是 Web APP 的 天 下 ，Native APP 将 会 被 Web APP 逐渐 
取代 。 
下 一 小 节 开始 ， 我 们 将 正式 进入 Sencha Touch 框架 的 配置 、 开 发 及 使 用 环节 ， 读 者 将 会 
看 到 Sencha Touch 框架 在 构建 Web APP 应 用 方面 的 强大 功能 。 

















11.1.2 ”Sencha Touch 框架 环境 搭建 


Sencha Touch 框架 的 开发 环境 搭建 相对 要 稍微 复杂 一 些 ， 如 果 读 者 有 Java 语言 的 开发 基 
础 ， 学 习 起 来 会 简单 一 些 。Sencha Touch 开发 环境 可 以 完美 搭建 在 Linux、Windows、iOS 等 操 
作 系 统 平台 上 ， 本 书 主 要 介绍 Windows 平台 的 搭建 过 程 ， 在 其 他 平台 上 搭建 的 过 程 大 同 小 异 ， 
感 兴 趣 的 读者 可 以 参考 Sencha 的 官方 文档 。 

搭建 Sencha Touch 框架 的 开发 环境 需要 安装 Sencha Touch 的 SDK 开发 工具 包 ， 而 单单 安装 
Sencha Touch SDK 还 远 远 不 够 ， 因 为 Sencha Touch SDK 还 需要 Java 语言 环境 。 同 时 ，Sencha 官 
方 推荐 使 用 Sencha Cmd 工具 创建 Sencha Touch APP， 而 Sencha Cmd 工具 需要 Ruby 语言 支持 ， 
因此 还 需要 安装 Ruby。 


1. 获取 Sencha Touch 框架 SDK 开 发 包 


Sencha Touch 框架 SDK 开发 包 是 开发 Sencha Web APP 的 核心 部 件 ， 大 家 可 以 登录 Sencha 
官方 网 站 进行 下 载 。Sencha Touch 框架 SDK 开发 包 的 v2.4.2 提供 GPL 版 和 免费 商业 版 (Free 
Commercial Version) 两 种 版 本 ， 其 中 GPL 版 提供 了 更 多 的 功能 。 我 们 使 用 免费 商业 版 就 可 以 基 
本 满足 绝 大 部 分 需求 ， 具 体 的 下 载 地 址 为 https://www.sencha.com/products/touch/download/。 打 开 
页 面 后 的 效果 如 图 11.1 所 示 。 
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NY Dei orm Te x 





eC [6 hnps/www sonia ronnieiinonnaommional 高 克 | 
sm 三 


Sencha Touch Free Commercial Version | 











图 11.1 Sencha Touch 框架 SDK 开发 包 下 载 页 面 


在 图 所 示 的 页 面 中 填 入 相关 的 个 人 信息 后 就 可 以 下 载 免费 商业 版 的 SDK 开发 包 。 这 里 需要 
注意 的 是 ， 个 人 邮箱 是 很 关键 的 必 填 项 ， 且 保证 填 入 能 够 正常 使 用 的 邮箱 ， 因 为 下 载 链接 是 以 邮 
件 方式 发 送 到 个 人 邮箱 的 。 

上 述 操 作 都 正确 完成 后 ， 我 们 将 下 载 到 一 个 压缩 包 文件 (文件 名 为 sencha-touch-2.4.2- 
commercial.zip)。 该 压缩 包 文件 就 是 最 新 版 的 Sencha Touch 框架 SDK 开发 包 。 


2. 关于 Sencha Touch 框架 开发 文档 


Sencha 提供 了 比较 完善 的 开发 文档 ， 就 这 一 点 也 是 要 为 Sencha 公司 点 赞 的 。 如 果 开 发 文档 
不 完善 ， 学 习 起 来 会 非常 费力 。 

Sencha Touch 框架 的 开发 文档 地 址 为 http://docs.sencha.com/touch/2.4/， 打 开 页 面 后 的 效果 如 
图 11.2 所 示 。 








Sencha Touch 2 | 
| 
1. Introduction | 


Download and insial he necessany components tp get 
m 





2. Core Concepts 


Leam the core concepts of Sencha Touch 











图 11.2 Sencha Touch 框架 开发 文档 页 面 
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文档 当然 是 纯 英文 的 ， 不 过 个 人 感觉 还 是 非常 易 读 易 懂 的 。 从 安装 、 配 置 、 创 建 应 用 到 详尽 
的 API 详解 等 ， 内 容 很 全 、 很 丰富 。 


3. 获取 Sencha Touch 框 架 Cmd 工 具 


Sencha Cmd 是 官方 提供 的 一 款 功能 强大 的 命令 行 工具 。 根 据 官方 文档 的 建议 ， 使 用 Sencha 
Cmd 工具 可 以 快速 地 创建 Sencha Touch APP 项 目 。Sencha Cmd 工具 同时 还 具有 将 项 目 中 的 js 及 
css 文件 进行 压缩 的 功能 ， 以 及 将 项 目 打 包 成 各 种 移动 平台 安装 程序 的 功能 。 另 外 ，Sencha Cmd 
工具 会 在 打包 安装 程序 过 程 中 使 用 Sencha Packaging 自动 集成 相关 设备 的 本 地 函数 入 口 。 由 此 可 
见 ，Sencha Cmd 工具 的 功能 是 非常 强大 的 。 

Sencha Cmd 的 下 载 地址 为 https://www.sencha.com/products/sencha-cmd/download/， 打 开 页 面 
后 的 效果 如 图 11.3 所 示 。 


Dormosd Sore crdf x 


6 
€ © | @ hps//www.sencha.com/products/exatjs/cmd-download/ @， 

| see 于 
SENOWcoNa0s Suppoat rom Docs aoc cowuer 


Download Sencha Cmd 





Recommended 






Version 6 12 for 
Windows 64-bit 


Wim mctuoeo 
Version6 12 for 
Windows 32-bit 


DOWNLOAD 
WI RE INCLOED 








11.3 Sencha Cmd 工具 下 载 页面 


从 图 11.3 可 以 看 到 ， 用 户 可 以 根据 系统 平台 选择 相对 应 的 版 本 。 一 切 正常 的 话 ， 我 们 将 下 
载 到 一 个 压缩 包 文 件 〈 文 件 名 为 SenchaCmd-6.1.2-windows-64bitzip)， 该 压缩 包 文 件 就 是 Sencha 
Cmd 工具 包 。 将 压缩 包 解压 后 将 会 得 到 一 个 exe 安装 文件 ， 一 步 一 步 安装 就 可 以 了 。 

4. 安装 Java 的 jdk 开发 包 

Sencha Cmd 工具 是 使 用 Java 语言 编写 的 ， 所 以 系统 平台 上 没有 安装 Java 环境 的 ， 还 需要 安 
装 Java 的 jdk 开发 包 。 

目前 ，Sun 公司 已 经 被 Oracle 公司 收购 了 ， 所 以 jdk 开发 包 需 要 到 Oracle 官方 网 站 上 去 下 
载 ， 只 要 选择 好 与 本 机 系统 相 匹配 的 版 本 就 可 以 了 。jdkg 的 地 址 为 http:/www.oracle.com/technetwork/ 
javaVjavase/downloads/jdk8-downloads-xxx.html。 

在 Windows 平台 下 安装 jdk 比较 简单 ，jdk 开发 包 是 一 个 安装 程序 ， 一 步 一 步 安装 就 可 以 
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了 。 不 过 安装 完毕 后 还 需要 简单 配置 一 下 jdk 环境 变量 ， 具 体 如 下 (以 作者 本 机 jdk 路 径 为 
例 ): 


在 Windows 平台 下 配置 环境 变量 需要 在 “系统 属性 ”一 “环境 变量 ”中 进行 配置 ， 具 体 如 
11.4 和 图 11.5 所 示 。 


User variables for KING 























rable We 
path DNSencha\ Cm.176/ DAR 5b Program Fle 
PATHDT PATHOTG RO ROW 
Tavp USERPRONLEIApF Data\Loca\Tenp 
Te USERPRONLEIApF Oata\ Loca\Tenp 
New Et Deete 

Ss 
Variable Value 名 
ARE HOME Aprogam Ph GBH)Unae £0.50 | 
NODE_HOME DAnodsje 
NUMBER.OF PROCESSORS 人 
os Windows_NT 
path KAVA_HOMES\ bin; SURE_HOMESN\bin KANDROID_HOMEN CN\Pr.. 

New | Et | Deee | 





Ce | ow 
图 11.4 配置 jdk 环境 变量 (1) 












































Environment Variables x 
Uservariables for KING 
Viable ive 
path Di\Seneha\Cma\€1.1.76/.:DARuby?2-x54\bin:CAProgram Filecvint 
PATHEXT 5%PATHEXT%RB':RBW 
TEMP SUSERPROFILE%AppData\LocaTemp 
TMP SUSERPROFILE%WppData\LocaTemp 
ew Deiete 
Syetern veriables 
Variable Value 号 
NODE HOME DAnodejs 国 
NUMBER_OF_PROCESSORS 4 
os Windows NT 
Path IAVA_HOMESS\ bin: JRE_HOMESS\bin: HANDROID_HOME% CG\Pr.. 
PATHBT CONE BE-.BATCMD:VBSVBEJSJSEWSF WSH- MSC: RB RBW 
PROCESSOR ARCHITECTURE AMD64 人 














New.. Edit., Delete 
OK Cancel 
图 11.5 配置 jdk 环境 变量 (2) 
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然后 ， 新 建 “CLASSPATH ”环境 变量 ， 并 将 jdk 类 目录 下 的 jar 文件 加 入 该 环境 变量 ， 具 体 
如 下 以 作者 本 机 jdk 路 径 为 例 ): 


完成 效果 如 图 11.6 所 示 。 












































[ee wes ey 
per vaisdie for ONG 
Wake We 
pa Dnsencra ms L170/ :DMR on Pegam Fane- 
rrer PATHETTG RAN 
Ta usgpROFLEKNApFOaalocanreng 
Ti sarRoFLEaAepDateaaTenp 
Ce ee Te] 
区 
wo wee ~ 
vpn Capmegam elerovoCommunmen Lolty 
Comspec Cwm nemdem 
Fp HosT. check NO 
Di\program Files (x86)Uavayde1 £.0.60 
JREHOME Di\progrem Fles (S/Neve\jrel.30.60 
NODE HOME Di\nodes 上 
Tre] em ] eee 








图 11.6 将 jar 文 件 加 入 CLASSPATH 环境 变量 


最 后 ， 将 jdk 的 命令 行 目录 添加 进 “path” 环 境 变 量 ， 具 体 如 下 (以 作者 本 机 jdk 路 径 为 
例 ): 


完成 效果 如 图 11.7 所 示 。 




















Woe we 
Path Di\Senche\Cmo\€.1,1.76/-:D Ruby22-26\bin CAProgrem Fles\ nt 
prrer BATHECT a FBW 
Tup usERPROPLENAppDantocuhrenmp 
Te SERPROAL ERApP Data loaNTemp 

Bs Pw Bs 

区 

区 we - 
CONEBENECMDYESYBEJSJE WS WSH MSC RE-REW 

PROCESSOR ARCHTECTURE AMDGt 

PROCESSOR_IDENTIFIER ntste Family 6 Model 42 Stepping 7. Genuinelnte} 

PROCESSORLErE 6 

pROCES5ORREMSON 2207 

PSModulepath CWINDOWD orem3a WindonsPowsrshe\v1. MMedules CP. 站 





























Ce ee 
11.7 将 jdk 命 令 目 录 加 入 path 环境 变量 
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经 过 以 上 步 又，jdk 环境 就 基本 措 建 完毕 了 。 为 了 检测 配置 是 否 成 功 ， 可 以 在 命令 行 下 使 用 
如 下 命令 进行 检测 : 





完成 效果 如 图 11.8 所 示 。 





丽 Administrator Command Prompt 








图 11.8 检测 jdk 环境 配置 是 否 成 功 
出 现 如 图 11.8 中 的 显示 结果 就 表示 jdk 环境 已 经 配置 成 功 了 。 


5. 安装 Ruby 开发 工具 
另外 ， 运 行 Sencha Web APP 项 目 还 需要 Ruby 环境 的 支持 ，Ruby 可 以 用 来 帮助 编辑 项 目 中 
的 css 文件 。 


可 以 访问 Ruby 的 官方 网 站 下 载 Ruby 工具 及 其 安装 包 ， 具 体 的 下 载 地 址 为 
http://rubyinstaller.org/downloads/。 打 开 页 面 后 的 效果 如 图 11.9 所 示 。 


吾 - 
N Demsesere re xj 四 cut x 
本 PC D mbyintaller org/downiomiy 3 


人 RubylInstaller About Download Help Contribute 








Other Useful Downloads 


(rapARcmvEs 











11.9 Ruby 下 载 页 面 


从 图 11.9 可 以 看 到 ， 用 户 可 以 根据 系统 平台 选择 相对 应 的 版 本 。 一 切 正常 的 话 ， 我 们 将 下 


载 到 一 个 exe 文件 (文件 名 为 rubyinstaller-2.2.4-x64.exe)， 该 文件 就 是 Ruby 安装 包 ， 一 步 一 步 
安装 就 可 以 了 。 


在 安装 过 程 中 有 一 步 需要 注意 一 下 ， 就 是 将 Ruby 工作 目录 添加 进 系统 环境 变量 ， 具 体 如 图 
11.10 所 示 。 
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出 Setup - Ruby 22.4-p230-x64 一 愉 





Installation Destination and Optional Tasks 全 





Setup wil install Ruby 2.2.4-p230-x64 into the following folder. Click Instal to 
continue or cick Browse to use a different one. 


Please avoid any folder name that contains spaces (e.g. Program Fies). 








ID:\Ruby22-x64 Browse... 
Install Td/Tk support 
回 add Ruby executables to your PATH 
回 Assoaate .rb and .rbw files with this Ruby instalation 














Required free disk space: ~48.3 MB 








<Back conesl 
图 11.10 Ruby 安装 配置 
安装 完毕 后 ， 可 以 在 命令 行 下 使 用 如 下 命令 检测 Ruby 配置 是 否 成 功 : 
局 = 一 
完成 效果 如 图 11.11 所 示 。 























国 Administrator Command Prompt - DO x 








图 11.11 检测 Ruby 是 否 安装 成 功 
出 现 如 图 11.11 中 的 显示 结果 就 表示 Ruby 已 经 安装 成 功 了 。 
6. 安装 Chrome 浏览 器 


目前 ， 调 试 运行 Sencha Touch Web APP 比较 好 的 浏览 器 是 Google Chrome 和 Safari。 因 为 
Sencha Touch 是 基于 webkit 内 核 的 ， 所 以 Google Chrome 和 Safari 浏览 器 可 以 最 大 程度 地 发 挥 出 
Sencha Touch Web APP 的 优越 性 能 。 

Chrome 浏览 器 拥有 强大 的 js 调试 工具 ， 壁 如 查看 DOM 树 、 定 位 HTML 元 素 、 页 面 事 件 触 
发 、 实 时 监控 CPU 使 用 率 与 内 存 占 有 率 、js 代码 调试 等 。 

另外 ， 如 果 读 者 使 用 在 线 安装 方式 出 现 无 法 连接 的 情况 ， 可 以 选择 下 载 Google Chrome 的 离 
线 安装 包 进 行 本 地 安装 。 

7. 选择 一 款 自 己 喜 欢 的 开发 工具 ( IDE ) 


因为 Sencha Touch Web APP 本 质 上 是 HTML 5、JavaScript 和 CSS 语言 项 目 ， 所 以 可 选 的 开 
发 工具 (IDE) 很 多 ， 壁 如 Visual Studio、Eclipse、JetBrains WebStorm 等 都 是 重量 级 的 IDE 工 
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具 。 当 然 ， 轻 量 级 的 开发 工具 〈 诸 如 Sublime、UltraEdit 和 EditPlus 编辑 器 ) 也 是 完全 能 胜任 
Sencha Touch Web APP 项 目 开 发 的 。 这 个 完全 看 个 人 喜好 ， 用 着 顺手 就 可 以 。 


8. 安装 Sencha Touch 框架 SDK 开发 包 与 Sencha Cmd 工具 

经 过 前 面 步骤 的 铺垫 ， 现 在 可 以 安装 Sencha Touch 框架 SDK 开发 包 与 Sencha Cmd 工具 
Ts 

首先 ， 安 装 Sencha Touch 框架 。 从 前 文中 我 们 知道 ，Sencha Touch 框架 SDK 开发 包 是 一 个 
压缩 包 ， 我 们 可 以 为 Sencha Touch 专门 创建 一 个 目录 〈 壁 如 sencha)， 然 后 将 Sencha Touch 框架 
SDK 开发 包 解压 到 该 sencha 文件 夹 内 。 

然后 ， 安 装 Sencha Cmd 工具 。 从 前 文中 我 们 知道 ，Sencha Cmd 工具 是 一 个 exe 安装 文件 ， 
安装 目录 选择 与 Sencha Touch 框架 在 同一 目录 下 就 可 以 。 

全 部 安装 完毕 后 的 效果 如 图 11.12 所 示 。 





则 | 加 是 = | enema 己 下 名 ”车 
四 -@ 
~ 不 < Local Disk(D) » sencha ve Searchsenchs EE 

图 pecumente w 和 Name 一 Date modified Type 
Pictues 4 有 20165261i2 Filefolder 
HsipanF2 ouch-242 2016/5/191520 Filefoder 
bh Music 
四 
sick eave 
OneDrie 
加 Thispc v < > 
Zai eed 园 = 





图 11.12 sencha 安装 目录 


经 过 以 上 步骤 ，Sencha Touch 框架 开发 环境 就 基本 措 建 完毕 了 。 为 了 检测 配置 是 否 成 功 ， 可 
以 在 命令 行 下 使 用 如 下 命令 进行 检测 : 


配置 成 功 后 的 效果 如 图 11.13 所 示 。 








图 11.13 检测 sencha touch 配置 是 否 成 功 


另外 ，sencha cmd 命令 行 选项 、 分 类 和 命令 也 有 帮助 说 明 ， 如 图 11.14、 图 11.15 和 图 11.16 
所 示 。 
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丽 Administrator Command prompt - D x 





图 11.14 sencha cmd 命令 行 选项 帮助 说 明 





丽 Administrator Command Prompt - 0O x 








11.15 ”sencha cmd 分 类 帮助 说 明 





丽 Administrator Command Prompt 总 口 x 





图 11.16 sencha cmd 命令 帮助 说 明 


至 此 ，Sencha Touch 框架 就 基本 搭建 成 功 了 。 另 外 ，Linux 系统 (Ubuntu、CentOS 等 )、iOS 
系统 或 BlackBerry 系统 的 环境 搭建 过 程 大 同 小 异 ， 可 以 参考 官方 文档 进行 学 习 。 
11.1.3 创建 第 一 个 Sencha Touch APP 


本 小 节 我 们 将 实现 第 一 个 Sencha Touch APP， 通 过 一 个 最 基本 的 实例 让 读者 快速 入 门 ， 对 
Sencha Touch 框架 有 一 个 初步 的 了 解 。 
正如 前 文 介绍 的 ， 我 们 使 用 Sencha 官方 推荐 的 Sencha Cmd 工具 创建 Sencha Touch APP， 不 
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推荐 大 家 手动 创建 Sencha Touch APP， 因 为 Sencha Cmd 工具 会 自动 为 我 们 创建 项 目 编译 压缩 打 
包 所 必需 的 关键 文件 。 

下 面 我 们 一 步 一 步 开始 介绍 。 

1. 准备 工作 


Sencha Cmd 工具 需要 在 命令 行 环境 下 使 用 ， 同 时 工作 目录 必须 是 Sencha Touch 框架 的 sdk 
目录 。 这 一 点 在 Sencha 官方 文档 中 有 明确 的 要 求 ， 下 面 是 Sencha 官方 文档 给 出 的 具体 说 明 : 


因此 ， 我 们 需要 先 在 命令 行 中 进入 本 机 的 Sencha Touch 框架 SDK 目录 ， 具 体 如 图 11.17 所 
示 。 








11.17 Sencha Touch 框架 SDK 目录 


2. 创建 Sencha Touch APP 项 目 


根据 官方 文档 的 说 明 ， 在 命令 行 下 进入 Sencha Touch 框架 SDK 目录 后 ， 使 用 如 下 命令 创建 
Sencha Touch APP 应 用 : 


根据 官方 文档 的 说 明 ， 还 可 以 使 用 “-sdk ”命令 参 数 创 建 APP， 其 好 处 是 不 需要 先进 入 
Sencha Touch 框架 SDK 目录 后 再 创建 APP 了 。 具 体 命令 如 下 : 


| | 
在 控制 台 执行 命令 行 后 的 效果 如 图 11.18 所 示 。 


第 11 章 ， Sencha Touch 框架 





加 $7 入 - Oo x 








图 11.18 使 用 Sencha Cmd 创建 APP 


在 图 11.18 中 可 以 看 到 ， 如 果 Sencha Cmd 命令 没有 问题 ， 控 制 台中 会 打印 输出 若干 提示 信 
息 。 这 些 信息 会 告诉 设计 人 员 Sencha Cmd 的 版 本 、 项 目 路 径 、bootstrap 脚本 文件 等 重要 信息 。 


3. Sencha Touch APP 项 目 目录 结构 


Sencha Touch APP 项 目 创建 成 功 后 ， 在 指定 的 目录 下 会 新 保存 一 个 项 目 〈 本 例 为 
“firstApp”)， 即 新 创建 APP 的 所 在 路 径 。 
Sencha Touch APP 项 目 在 控制 台 下 显示 的 基本 目录 结构 如 图 11.19 所 示 。 








图 11.19 Sencha Touch APP 目录 结构 


11.19 展示 的 目录 结构 不 是 很 直观 ， 我 们 可 以 使 用 jetBrains 的 WebStorm 集成 开发 平台 来 
载 入 刚刚 创建 的 firstApp 项 目 ， 如 图 11.20 所 示 。 


4. Sencha Touch APP 项 目 结构 分 析 

@ .sencha 目录 : 主要 是 Sencha Cmd 创建 项 目 时 生成 的 一 些 配 置 文件 ， 初 学 阶段 对 项 目的 
开发 作用 不 是 很 大 ， 可 以 暂时 先 不 去 学 习 里 面 的 文件 功能 。 

@ app 目录 : 项 目的 关键 主体 部 分 ， 支 撑 整 个 项 目 运行 的 功能 代码 基本 都 在 该 目录 内 ， 有 具 
体 如 图 11.21 所 示 。 

@ build 目录 : 一 般 在 使 用 Sencha Cmd 指令 打包 压缩 编译 项 目 时 会 使 用 到 该 目录 。 

packages 目录 : 用 于 存放 项 目的 包 文件 。 

@ 。 Iesource 目录 : 用 于 存放 项 目的 css 文件 、 图 片 文件 等 资源 ， 还 有 sass 主题 样式 文件 。 
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Sencha Touch 框架 将 这 些 文件 全 部 集成 到 了 项 目 中 ， 具 体 如 图 11.22 所 示 。 通 过 对 这 些 
文件 的 编写 ， 设 计 人 员 可 以 很 方便 地 实现 对 项 目 主题 与 样式 的 编辑 修改 等 功能 。 

@ touch 目录: 将 sdk 包 中 的 资源 文件 复制 到 项 目 中 ， 其 包含 了 css 样式 、 启 动 图 片 、src 
项 目 源码 等 重要 文件 ， 具 体 如 图 11.23 所 示 。 

@ 项 目 根 目 录 下 一 些 主要 文件 说 明 : index.html 文件 是 整个 项 目的 访问 入 口 ; app.js 是 整 
个 项 目的 入 口 js 文件 ; appjson 是 用 来 配置 应 用 程序 访问 资源 的 ， 如 css、js 以 及 离线 
缓存 文件 的 配置 ; bootstrapjs 里 提供 了 全 局 的 Ext 文件 引用 。 


下 口 workspace (Di\Se 
v OfirstApp 
» Dsencha 
* Dopp 
» Dbuid 
Dpackages 
» Dresources 
» Dtouch 
Bappjs 
句 appjson 
讨 bootstrapjs 
种 bootstrapjson 
信 buildxml 
国 indexhtml 
六 workspacejson 
Wh External Libraries 













DD controller 
Dfom 
DD model 


DD profile 
Dstore 
Dvew 

目 Readme.md 


图 11.20 ”Sencha Touch APP 目录 结构 图 11.21 app 目录 结构 








误 sencha 

Dbuids 

Demd 

Ddocs 

Dexamples 

D microloader 

Dresources 

Dsre 

全 buildxml 

目 fle-headerbd 

国 indexhtml 

目 icensebt 

国 release-notes html 
得 sencha-touchjs 


漆 sencha-touch-aljs 

区 sencha-touch-all-debugjs 
区 sencha-touch-debugjs 

国 senchaLogo.png 

口 sass 国 SeTUP.html 

DD startup versionbdt 


Dess 
Dicons 
Dloading 





图 11.22 resource 目录 结构 图 11.23 touch 目录 结构 


有 Web MVC 项 目 经 验 的 读者 一 定 注意 到 了 ，app 目录 的 内 容 体现 了 Sencha Touch 框架 的 
MVC 驱动 模型 ， 原 理 如 图 11.24 所 示 。 
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Application 


图 11.24 Sencha Touch APP 的 MVC 驱动 模型 


在 图 11.21 中 ，app 目录 下 一 共 包 括 6 个 子 目录 ， 分 别 代表 不 同 的 功能 模块 。 下 面 我 们 对 该 
MVC 模型 结构 做 一 个 简单 的 说 明 。 


View (视图 ) : 用 来 展现 项 目 用 户 界面 的 部 分 。 

Form (表单 ) : 用 来 展现 项 目 页 面 表单 的 部 分 ， 与 视图 功能 有 些 类 似 。 

Controller ( 控制 器 ) : 用 来 监听 视图 、 表 单 界面 上 的 用 户 交 互 操作 ， 例 如 点 击 、 滚 
动 、 触 摸 等 事件 操作 。 

Model ( 实体 模型 ) : 用 于 定义 现实 中 具体 的 类 模型 ， 例 如 用 户 、 表 单 、 商 品 型 号 等 数 
据 类 型 ， 用 面向 对 象 编 程 的 理解 就 是 实体 类 。 

Store (数据 仓库 ) : 数据 仓库 可 以 将 数据 载 入 到 List、ListView、DataTable 这 类 功能 
强大 的 视图 组 件 上 ，Store 一 般 需要 与 Model 进行 关联 开发 。 

Profile (设备 类 型 ) : Profile 用 来 判断 用 户 的 设备 类 型 ， 并 且 可 以 根据 判断 结果 做 相应 
的 操作 跳 转 到 对 应 平台 上 设计 的 View 界面 。 


11.1.4 Sencha Touch APP 代码 解析 


现在 我 们 回 到 刚刚 创建 的 firstApp 项 目 上 ， 通 过 对 其 主要 代码 文件 的 分 析 详细 解析 Sencha 
Touch APP 的 运行 机 制 。 


(1) 首先 ， 看 一 下 整个 firstApp 项 目的 访问 入 口 文 件 index.html。 


【代码 11-1】 
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下 面 对 【 代 码 11-1】 进 行 具体 介绍 : 

第 05 行 代码 使 用 <title> 属 性 定义 了 页 面 标题 。 

第 06 一 48 行 代码 定义 了 页 面 的 样式 ， 其 中 使 用 到 了 很 多 CSS 样式 表 的 语法 ， 对 于 有 HTML 
基础 的 读者 没有 什么 难度 。 其 中 ， 第 16 一 47 行 代码 定义 了 一 个 id 值 为 appLoadingIndicator 的 
CSS 动画 样式 ， 用 于 演 染 第 57 一 61 行 代码 定义 的 <div> 标 签 。 

第 50 一 54 行 代 码 引 用 了 一 个 非常 重要 的 js 脚本 文件 〈"developmentjs")， 位 置 是 在 项 目 
的 .sencha 目录 下 的 ， 该 文件 是 整个 项 目的 js 入 口 文件 。 

第 56 一 62 行 代码 定义 了 页 面 的 主体 部 分 。 


(2) 看 一 下 刚刚 提 到 的 整个 firstApp 项 目的 js 入 口 文件 developmentjs( 源 代码 比较 长 ， 这 
里 截取 部 分 主要 的 代码 )。 


【代码 11-2】 
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下 面 对 代码 进行 具体 介绍 : 


第 09 一 11 行 代码 通过 ajax 方式 请 求 bootstrap.json 文件 ， 该 文件 位 于 firstApp 项 目 根 目 
录 下 。 

第 15 一 18 行 代码 将 bootstrap.json 文件 中 的 内 容 解析 为 json 对 象 格式 。 

第 22 一 25 行 代码 判断 bootstrapjson 的 json 内 容 是 否 设置 了 platform 属性 ， 主 要 用 来 配置 
theme 主题 。 


第 29 一 42 行 代码 通过 浏览 器 的 userAgent 属性 值 来 判断 是 否 为 IE10 浏览 器 ， 如 果 是 就 创建 
CSS 3 媒体 查询 设置 。 


第 46 一 50 行 代码 设置 页 面 的 meta 标签 ， 用 来 控制 页 面 的 缩放 以 及 宽 高 等 属性 。 
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第 54 一 164 行 代码 主要 用 于 判断 该 APP 项 目 具 体 运行 于 什么 设备 平台 上 (例如 iOS、iPad 
和 Android 等 )。 


(3) 看 一 下 【代码 11-2】 中 请 求 的 json 文件 bootstrapjson。 
【代码 11-3】 





下 面 我 们 对 代码 进行 具体 介绍 : 

第 02 行 的 代码 注释 明确 说 到 该 文件 是 由 Sencha Cmd 工具 自动 创建 生成 的 ， 并 且 设计 人 员 
不 要 尝试 去 编辑 该 文件 。 

第 03 一 05 行 的 代码 注释 说 到 该 文件 是 由 app.json 文件 的 内 容 组 合 而 来 的 。 

第 07 一 13 行 代码 定义 了 一 组 json 数据 ， 引 用 了 几 个 js 脚本 文件 。 第 08 行 代码 定义 了 项 目 
唯一 的 id 值 。 第 09 行 代 码 引用 了 sencha-touchjs 文件 ， 该 文件 是 Sencha Touch 框架 的 脚本 文 
件 。 第 10 行 代码 引用 了 bootstrapjs 文件 ， 该 文件 定义 了 ExtJS 框架 的 参数 属性 。 第 11 行 代码 引 
用 了 appjs 文件 ， 该 文件 是 firstApp 项 目 控制 运行 的 主要 脚本 文件 。 第 12 行 代码 引用 了 app.css 
样式 文件 。 


(4) 看 一 下 【代码 11-3】 中 引用 的 js 文件 appjs。 
【代码 114】 
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下 面 对 代码 进行 具体 介绍 : 

第 02 一 09 行 的 代码 注释 讲 到 了 该 文件 是 由 Sencha Cmd 工具 自动 创建 生成 的 ， 设 计 人 员 可 
以 对 其 进行 编辑 修改 ， 但 同时 也 提 到 了 所 做 的 编辑 修改 必须 符合 Sencha Touch 框架 的 要 求 ， 否 
则 可 能 会 出 现 不 兼容 的 冲突 问题 。 

第 11 一 51 行 的 代码 使 用 到 了 ExtJS 框架 的 语法 ，Ext.Application() 方 法 是 ExtJS 框架 运行 的 
主 入 口 方法 。 比 较 重 要 的 是 第 34 一 39 行 代码 定义 的 函数 。 在 第 36 行 代码 使 用 的 Extfly() 方 法 
中 ， 使 用 destory() 方 法 销毁 了 一 个 HTML 元 素 (id 值 为 appLoadingIndicator )， 该 元 素 〈 见 
index.html 文件 ) 就 是 在 【代码 11-1】 中 第 57 一 61 行 代 码 定义 的 。 第 38 行 代 码 使 用 
Ext.Viewport.add() 方 法 初始 化 了 该 项 目的 主 视图 (Main View: 'firstApp.view.Main')。 第 40 一 50 
行 代码 用 于 提示 用 户 是 否 有 更 新 ， 确 认 更 新 后 的 页 面 会 自动 刷新 并 缓存 最 新 内 容 。 


(5) 在 【代码 114】 中 第 38 行 代码 初始 化 的 项 目 主 视 图 (Main View : 
'firstApp.view.Main') 中 ，firstApp.view.Main 代表 一 个 命名 空间 ， 其 中 firstApp 指向 app 目录 ， 
view 指向 app 目录 下 的 view 子 目录 ，Main 指向 view 子 目 录 下 的 Main.js 主 视图 文件 ， 名 称 必须 
严格 对 应 一 致 ， 否 则 运行 后 会 报错 。Mainjs 视图 文件 目录 如 图 11.25 所 示 。 


v Dapp 
上 Dcontroller 
> Dform 
上 Dmodel 

记 profile 
> Dstore 

v Dvew 





Readme.md 
目 Readme.md 


图 11.25 ”Mainjs 主 视图 文件 目录 


下 面 我 们 看 一 下 主 视图 Mainjs 文件 的 内 容 。Mainjs 文件 是 由 Sencha Cmd 工具 自动 创建 生 
成 的 ， 当 然 设计 人 员 可 以 对 其 进行 自 定义 编辑 。 


【代码 11-5】 
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下 面 对 代 码 进行 具体 介绍 : 

第 01 行 代码 使 用 Extdefine0 函 数 定义 了 一 个 视图 (firstApp.viewMain' )。 

第 02 行 代码 extend 属性 表示 继承 关系 ，Exttab.Panel 表示 tab 选项 卡 控件 。 

第 04 一 07 行 代码 使 用 requires 属性 可 以 在 类 初始 化 时 加 在 其 中 定义 的 js 类 文件 ， 此 处 定义 
了 两 个 类 (Ext.TitleBar 和 ExtVideo)。 
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第 08 一 44 行 代码 使 用 config 属性 进行 视图 的 具体 配置 ， 例 如 第 21 一 25 行 代码 使 用 html 属 
性 定义 了 一 段 页 面 文本 ， 另 外 还 有 一 些 属性 的 使 用 就 不 一 一 介绍 了 ， 本 章 后 面 还 会 有 具体 描述 。 


11.1.5 ”运行 Sencha Touch APP 

前 面 的 内 容 介 绍 了 我 们 创建 的 Sencha Touch APP 项 目 ， 虽 然 我 们 没有 对 其 代码 进行 编辑 修 
改 ， 但 这 并 不 影响 正常 运行 。 

Sencha Cmd 工具 为 设计 人 员 提 供 了 一 种 简单 快捷 的 运行 测试 方法 ， 即 在 控制 台 下 输入 下 面 
的 命令 就 可 以 启动 一 个 Web 服务 器 来 运行 Sencha Touch APP 项 目 。 


Sencha web start 


启动 Sencha Web 服务 器 的 控制 台 效 果 如 图 11.26 所 示 。 





而 管理 员 : 命令 提示 符 - sencha web start be 口 x 


\Sencha>sencha web start 
ha Cmd v6. 1. 2.15 
LUE] Starting server on port : 1841 
LE] Mapping http://localhost:1841/ to .... 








图 11.26 控制 台 下 启动 Sencha Web 服务 器 


从 图 11.26 中 的 提示 信息 可 以 看 到 ， 访 问 http://localhost:1841 就 可 以 打开 Web 服务 器 地 址 。 
下 面 我 们 打开 Chrome 浏览 器 ， 在 地 址 栏 中 输入 http://localhost:1841/workspace/firstApp/ 链 接 ， 测 
试 运行 刚刚 创建 的 firstApp 项 目 。 第 一 个 页 面 效果 如 图 11.27 所 示 。 





D frstApp X 


fs © BD localhost:1841/workspace/firstApp/ 电 Ye 三 








11.27 运行 firstApp 项目 (1) 


从 图 11.27 中 可 以 看 到 ,【 代 码 11-1】 中 第 57 一 61 行 代码 定义 id 值 为 appLoadingIndicator 的 
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<div> 标 签 在 页 面 中 以 动画 的 形式 显示 出 来 了 ， 然 后 又 被 【代码 11-4】 中 第 36 行 代码 的 函数 
销毁 了 。 

上 面 的 CSS 动画 效果 运行 完毕 后 ， 就 会 进入 项 目的 主 视图 ， 具 体 效 果 如 图 11.28 所 示 。 
回 - Do x 





D firstApp x 


所 C 0 Een Yb 三 


Welcome to Sencha Touch 2 


You've just generated a new Sencha Touch 2 project. What you're 
looking at right now is the contents of app/view/Main js - edit that file 
and refresh to change what's rendered here. 








11.28 运行 firstApp 项 目 (2) 


从 图 11.28 中 可 以 看 到 ,【 代 码 11-5】 中 第 21 一 25 行 代码 使 用 html 属性 定义 的 文本 内 容 成 
功 显示 在 页 面 视 图 中 了 。 
当 要 停止 Sencha Web 服务 器 时 ， 可 以 在 控制 台中 输入 如 下 命令 : 
Sencha web stop 
下 面 我 们 尝试 在 【代码 11-5】 中 编辑 一 些 简单 的 自 定义 代码 ， 在 第 21 一 25 行 代码 使 用 html 
属性 定义 的 文本 内 容 中 加 入 如 下 代码 : 
"<font style='font-size:20px;'>This is my first Sencha Touch App.</font>" 


然后 ， 我 们 刷新 一 下 http://localhost:1841/workspace/firstApp/ 地 址 ， 效 果 如 图 11.29 所 示 。 
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D frstApp X 


i © D localhost:1841/workspace/firstApp/ 和 Ye 


Welcome to Sencha Touch 2 


You've just generated a new Sencha Touch 2 project What you're 
looking at right now is the contents of app/view/Main js - edit that file 
and refresh to change what's rendered here. 





This is my first Sencha Touch App. 


11.29 编辑 firstApp 项 目 
从 图 11.29 中 可 以 看 到 ， 我 们 自 定义 编辑 的 代码 在 页 面 中 成 功 显示 出 来 了 。 当 然 ， 这 点 小 改 
动 还 远 远 看 不 出 Sencha Touch 框架 的 优势 所 在 ， 我 们 在 后 面 的 内 容 中 会 向 读者 展示 Sencha Touch 
框架 强大 的 扩展 功能 。 











Sencha Touch 核心 概念 


11.1 节 我 们 介绍 了 Sencha Touch 框架 的 初步 ， 基 本 都 是 比较 基础 的 内 容 。 这 一 节 我 们 循序 
渐进 地 介绍 一 下 Sencha Touch 框架 的 核心 概念 ， 包 括 类 系统 、 容 器 组 件 、 组 件 布局 和 事件 


11.2.1 类 系统 


Sencha Touch 框架 使 用 了 为 Ext JS 4 设计 开发 的 目前 最 先进 的 类 系统 ， 该 类 系统 可 以 非常 方 
便 地 基于 JavaScript 语言 创建 新 类 ， 并 提供 类 继承 〈inheritance )、 依 赖 加 载 (dependency 
loading)、 类 混合 (mixins) 以 及 强大 的 配置 选项 (powerful configuration options) 等 功能 。 

对 于 学 习 过 面向 对 象 编程 的 读者 ， 我 们 知道 一 个 类 就 是 一 个 包含 一 些 函 数 方法 和 属性 的 对 
象 。Sencha Touch 框架 的 类 系统 也 是 基于 这 个 思想 设计 的 ， 下 面 举 一 个 简单 的 类 的 例子 : 


【代码 11-6】 


01 Ext.define('BaseClass', { 
02 /fo 
03 config 


320 


第 11 章 Sencha Touch 框架 








在 【代码 11-6】 中 使 用 Ext.define0 方 法 定义 了 一 个 类 ， 其 中 包括 了 一 些 成 员 属性 与 成 员 方 
法 。 在 ExtJS 4 框架 中 ，Extdefine() 方 法 用 于 定义 一 个 类 ， 其 语法 如 下 : 


其 中 ，'Class' 表 示 定 义 的 类 名 称 。extend 关键 字 表示 类 继承 关系 。options 关键 字 表示 具体 类 
成 员 。 

下 面 我 们 再 返回 【代码 11-6】， 有 具体 看 一 下 该 类 是 如 何 定义 的 。 

第 01 行 代码 中 的 'BaseClass' 是 定义 的 类 名 称 。 

第 05 一 07 行 代码 定义 了 一 个 JSON 类 型 的 成 员 属 性 (config)。 

第 11 一 13 行 代码 定义 了 一 个 构造 方法 ， 并 使 用 initConfig0 方 法 将 config 属性 值 进行 了 初始 
化 操作 。 

第 17 一 19 行 代码 定义 了 一 个 成 员 方法 。 

第 23 行 代码 定义 了 一 个 成 员 属性 。 

我 们 注意 到 ， 在 【代码 11-6】 中 并 没有 使 用 类 继承 ， 后 面 的 例子 中 会 介绍 类 继承 的 使 用 方 
法 。 以 上 就 是 Sencha Touch 框架 定义 一 个 类 的 基本 方法 ， 是 基于 Ext JS 4 框架 来 实现 的 。 

有 了 上 面 一 段 关 于 Sencha Touch 类 定义 代码 的 介绍 ， 读 者 对 Sencha Touch 框架 类 系统 会 有 
一 个 初步 的 认识 ， 但 具体 应 用 起 来 还 是 比较 复杂 的 ， 需 要 深入 学 习 关 于 Ext JS 4 框架 类 系统 
的 知识 。 
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下 面 我 们 通过 几 个 简单 的 小 例子 来 了 解 一 下 Sencha Touch 框架 类 系统 的 应 用 方法 。 首 先 ， 
我 们 还 是 创建 一 个 Sencha Touch APP， 项 目 名 称 命名 为 “senchaClasses”， 具 体 创建 方法 可 以 参 
考 11.1.3 小 节 的 内 容 。 

我 们 需要 对 项 目 内 容 进行 一 些 添加 和 修改 ， 具 体 涉及 项 目 中 “app” 目 录 下 的 一 些 内 容 ， 如 
11.30 所 示 。 


» 站 controller 
* 站 form 
上 Dmodel 
记 profile 
» 站 store 
> Dvew 
目 Readme.md 


图 11.30 项 目 “app” 目 录 


在 图 11.30 中 的 “model” 目 录 下 ， 利 用 WebStorm 开发 工具 的 功能 新 建 一 个 JavaScript 类 ， 
并 将 类 名 称 定义 为 “NewClassjs”， 如 图 11.31 所 示 。 





W New Javascriptfle x 


Nove vend jn 


sd Boscipie 加 
[ox ME 
11.31 新 建 “NewClass” 类 
在 图 11.31 中 看 到 ， 在 Sencha Touch APP 中 新 建 JavaScript 类 ， 其 实 就 是 新 建 一 个 脚本 文 


件 。 而 文件 新 建 在 “model” 目 录 下 ， 表 示 该 JavaScript 类 是 一 个 “实体 ”类 。 然 后 ， 在 该 脚本 
文件 中 具体 定义 一 个 类 : 


【代码 11-7】 
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关于 类 的 内 容 介 绍 如 下 : 

第 01 行 代码 定义 了 类 名 称 “senchaClasses.model.NewClass”。 这 里 需要 注意 两 点 ， 第 一 ， 类 
名 必须 是 全 称 ， 也 代表 了 类 的 路 径 ， 第 二 ， 类 名 必须 与 JavaScript 脚本 文件 名 一 致 ， 否 则 会 报 
错 。 

第 05 行 代 码 定 义 了 一 个 属性 Cname)， 初 始 值 为 "Unknown'。 

第 09 一 13 行 代码 定义 了 一 个 构造 方法 ， 对 属性 name) 进行 了 赋值 。 

第 17 一 19 行 代码 定义 了 一 个 函数 方法 (info)， 用 于 返回 一 些 信息 。 

那么 我 们 新 建 的 这 个 Sencha 类 怎么 使 用 呢 ? 打开 图 11.30 中 “view” 目 录 下 的 Mainjs 文件 
(项 目的 主 视图 入 口 文 件 )， 在 该 视图 文件 内 加 入 如 下 代码 : 


【代码 11-8】 





关于 代码 中 的 内 容 介 绍 如 下 : 
第 04 行 代码 使 用 Extcreate() 方 法 创建 了 NewClass 的 一 个 实例 (king)， 建 议 将 该 行 代码 放 
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在 文件 的 开头 位 置 ， 这 样 在 脚本 文件 加 载 时 就 会 被 执行 。 
第 08 一 18 行 代码 对 “html” 关 键 字 中 的 内 容 进 行 修改 ， 增 加 了 一 些 内容 。 第 12 行 代码 调用 
了 【代码 11-7】 中 定义 的 “info” 函 数 方 法 ， 向 页 面 中 输出 一 些 内 容 。“html” 关 键 字 的 具体 位 置 
需要 在 Mainjs 文件 查询 一 下 ， 其 是 Sencha Touch 框架 自动 生成 的 代码 ， 里 面 的 内 容 是 可 以 自 定 
义 修改 的 。 
运行 “senchaClasses” 应 用 ， 页 面 效果 如 图 11.32 所 示 。 
| : ee 口 x 


€ 3 © Dlocalhost1841/workspace/senchaClasses/9¢3 三 





[DD senchaClasses x\ 








Welcome to Sencha Touch 2 


You've just generated a new Sencha Touch 2 project. 
Project Details: How to Use Classes in Sencha Touch. 











图 11.32 “NewClass” 类 运行 效果 


从 图 11.32 中 可 以 看 到 ， 定 义 的 “NewClass” 类 被 成 功 加 载 了 ， 该 类 中 定义 的 “info” 函 数 
方法 也 被 成 功 调用 执行 了 ， 页 面 中 输出 了 【代码 11-8】 中 自 定义 的 内 容 。 

Sencha Touch 类 系统 对 类 继承 也 进行 了 很 好 的 实现 ， 只 要 在 定义 子 类 时 使 用 extend 关键 字 表 
明 继 承 父 类 的 名 称 即 可 。 下 面 我 们 还 是 在 图 11.30 中 的 “model” 目 录 下 新 建 两 个 JavaScript 脚本 
文件 (BaseClassjs 与 SubClassjs)， 正 如 文件 名 定义 的 那样 ， 一 个 文件 代表 父 类 ， 一 个 文件 代表 
子 类 。 

我 们 先 看 一 下 BaseClass.js 脚本 文件 : 


【代码 11-9】 
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类 的 内 容 介 绍 如 下 : 

第 01 行 代码 定义 了 父 类 名 称 为 “senchaClasses.model.BaseClass”。 

第 05 一 07 行 代码 定义 了 一 个 JSON 属性 〈config)， 后 面 我 们 会 详细 介绍 其 用 法 。 

第 11 一 13 行 代码 定义 了 一 个 构造 方法 ， 对 属性 〈config) 进行 了 初始 化 。 

第 17 一 19 行 代码 定义 了 一 个 函数 方法 (funcC)， 用 于 返回 一 些 信息 。 其 中 的 getName() 方 法 
我 们 也 会 在 后 面 详细 介绍 ， 这 里 只 要 知道 其 功能 可 以 获取 “name” 属 性 值 即 可 。 

我 们 再 看 一 下 SubClass.js 脚本 文件 : 


【代码 11-10】 





类 的 内 容 介绍 如 下 : 


第 01 行 代码 定义 了 子 类 名 称 为 “senchaClasses.model.SubClass'”。 

第 05 行 代码 使 用 extend 关键 字 定义 了 其 继承 关系 的 父 类 。 

第 09 一 11 行 代码 定义 了 一 个 函数 方法 (funcCC)， 用 于 返回 一 些 信息 。 该 函数 方法 可 以 与 
【代码 11-9】 中 的 函数 方法 (funcC) 进行 参考 对 比 。 

返回 图 11.30 中 “view” 目 录 下 的 Mainjs 文件 ， 在 该 视图 文件 内 加 入 如 下 代码 : 
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【代码 11-11】 





关于 代码 中 的 内 容 介绍 如 下 : 


第 04 一 06 行 代码 使 用 Ext.create0) 方 法 创建 了 'BaseClass' 的 一 个 实例 (base)。 

第 10 一 12 行 代码 使 用 Ext.create0) 方 法 创建 了 'SubClass' 的 一 个 实例 (sub)。 

第 13 一 22 行 代码 对 “html” 关 键 字 中 的 内 容 进行 了 修改 ， 使 用 “base ”实例 调用 了 
“funcC” 函 数 方法 ， 使 用 “sub” 实 例 调用 了 “funcC” 与 “funcCC” 函 数 方 法 。 

下 面 将 “senchaClasses” 应 用 再 次 运行 起 来 测试 一 下 ， 页 面 效 果 如 图 11.33 所 示 。 


RE 加 - o x 
口 senchaclasses x VE 


€ 3 CC Dlocalhost1841/workspace/senchaClasses/ 曙 从 三 













Welcome fo Sencha Touch 2 










‘You've just generated a new Sencha Touch 2 project. 
Project Details: How to Use Classes in Sencha Touch_ 





BaseClass - getName() is base 





BaseClass - getName() is sub 





subClass - getName() is sub 





图 11.33 ”Sencha 类 继承 运行 效果 
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从 图 11.33 中 可 以 看 到 ， 在 【代码 11-11】 中 第 17 行 代码 使 用 “base” 实 例 调 用 了 父 类 的 
“funcC” 函 数 方法 ，getName() 方 法 获取 了 第 05 行 代码 定义 “base” 实 例 时 初始 化 的 “name” 
属性 值 (“base”)。 第 19 行 代码 使 用 “sub” 实 例 调用 了 继承 自 父 类 的 “funcC” 函 数 方法 ， 
getName() 方 法 获取 了 第 11 行 代码 定义 “sub” 实 例 时 初始 化 的 “name” 属 性 值 “sub”)。 而 第 
21 行 代码 使 用 “sub” 实 例 调用 了 子 类 的 “funcCC” 函 数 方法 ，getName0 方 法 获取 了 第 11 行 代 
码 定 义 “sub” 实 例 时 初始 化 的 “name” 属 性 值 (“sub”)。 

在 上 面 这 个 应 用 实例 中 ， 关 于 “config” 属 性 的 使 用 我 们 没有 深入 分 析 ， 仅 仅 向 读者 演示 了 
其 功能 。 其 实 ,“config” 属 性 是 Sencha Touch 框架 为 设计 人 员 继 承 好 的 功能 ， 通 过 类 似 
getName() 的 函数 方法 可 以 很 方便 地 进行 操作 。 下 面 我 们 再 通过 一 个 简单 的 应 用 实例 向 读者 演示 
“config” 属 性 的 使 用 方法 。 

在 图 11.30 中 的 “model” 目 录 下 新 建 两 个 JavaScript 脚本 文件 (BaseConfigClassjs 与 
SubConfigClassjs)， 其 中 一 个 文件 代表 父 类 ， 另 一 个 文件 代表 子 类 。 

我 们 先 看 一 下 BaseConfigClassjs 脚本 文件 : 


【代码 11-12】 





类 的 内 容 介绍 如 下 : 

第 01 行 代码 定义 了 父 类 名 称 为 “senchaClasses.model.BaseConfigClass'”。 

第 05 一 08 行 代码 定义 了 一 个 JSON 属性 (config)， 下 面包 括 了 两 个 自 定义 属性 (分 别 代表 
姓名 name 和 性 别 sex)。 

第 12 一 14 行 代码 定义 了 一 个 构造 方法 ， 对 属性 〈config) 进行 了 初始 化 。 

我 们 再 看 一 下 SubConfigClassjs 脚本 文件 : 
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【代码 11-13】 





[FE 

类 的 内 容 介绍 如 下 : 

第 01 行 代码 定义 了 子 类 名 称 为 “senchaClasses.model.SubConfigClass'”。 

第 05 行 代码 使 用 extend 关键 字 定 义 了 其 继承 关系 的 父 类 。 

第 09 一 12 行 代码 定义 了 一 个 函数 方法 (funcConfig)， 用 于 返回 属性 (姓名 name 和 年 龄 
age) 信息 。 

第 16 一 18 行 代码 定义 了 一 个 函数 方法 (applyName)， 注 意 该 函数 方法 是 Sencha Touch 类 系 
统 为 设计 人 员 内 置 的 方法 ， 用 于 对 调用 setName0 函 数 方法 后 回调 操作 。setName() 函 数 方法 与 
getName() 函 数 方法 是 配对 的 一 组 方法 ， 分 别 用 于 设 定 和 获取 属性 值 。 

第 22 一 24 行 代码 定 义 了 一 个 函数 方法 (updateName)， 该 函数 方法 也 是 Sencha Touch 类 系 
统 为 设计 人 员 内 置 的 方法 ， 与 前 面 的 applyName0 函 数 方法 是 一 组 方法 ， 但 两 个 方法 的 功能 是 有 
区 别 的 ， 后 面 在 介绍 运行 结果 时 再 详细 讲 。 

同样 的 ， 第 28 一 30 行 代码 与 第 34 一 36 行 代码 定义 的 两 个 函数 方法 是 对 年 龄 age 属性 的 
操作 。 

再 次 返回 图 11.30 中 “view” 目 录 下 的 Main.js 文件 ， 在 该 视图 文件 内 加 入 如 下 代码 : 


【代码 11-14】 








代码 中 的 内 容 介绍 如 下 : 
第 04 一 06 行 代码 使 用 Extcreate() 方 法 创建 了 'SubConfigClass 的 一 个 实例 (subConfig )， 并 对 
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姓名 name 和 年 龄 age 属性 进行 了 初始 化 操作 。 

第 08 一 19 行 代码 对 “html” 关 键 字 中 的 内 容 进行 了 修改 ， 使 用 “subConfig” 实 例 分 别 调用 
了 “funcConfig”“setName” 和 “setAge” 子 数 方法 ， 对 姓名 name 和 年 龄 age 属性 进行 操作 与 显 
示 。 

下 面 将 “senchaClasses” 应 用 再 次 运行 起 来 ， 看 一 下 页 面具 体 向 我 们 显示 了 哪些 效果 。 

第 一 组 效果 如 图 11.34、 图 11.35、 图 11.36 和 图 11.37 所 示 。 


西 - 3 - 西 - 5 


口 senchaclasses x | 口 :enchaclasses x 
< < 


C |D localhost:1841/workspace/senchaClasses/ 电 从 | 三 







© [localhost:1841/workspace/senchaClasses/ 电 客 三 







localhost:1841 显示 : localhost:1841 显示 : 
Are u sure to apply name to oldName? 


禁止 此 页 再 显示 对 话 框 . 


Are usureto update name to cldName? 


禁止 此 页 再 旦 示 对 笑 框 。 


11.34 ”config 属性 应 用 操作 (1) 图 11.35 ”config 属性 应 用 操作 (2) 
百 百 | 
口 senchaclasses x | DD senchaClasses x | 


名 | BD localhost:1841/workspace/senchaClasses/ 曙 YY 三 Ln © |D localhost:1841/workspace/senchaClasses/ 曙 39| 三 


localhost:1841 显示 : localhost1841 显示 : 


Are u sure to apply age to 99? 
区 上 上 此 页 再 旦 示 对 活 框 . 


Are u sure to update age to 997 


擎 止 此 页 再 县 示 对 话 框 . 


图 11.36 config 属性 应 用 操作 (3) 图 11.37 config 属性 应 用 操作 (4) 


从 图 11.34、 图 11.35、 图 11.36 和 图 11.37 中 看 到 ,【 代 码 11-14】 中 的 第 04 一 06 行 代码 对 姓 
名 name 和 年 龄 age 属性 进行 初始 化 操作 后 ， 触 发 了 【代码 11-13】 中 定义 的 “applyName” 和 
“updateName ”函数 方法 ， 而 且 触 发 顺序 是 “applyName” 函 数 方法 触发 在 前 、“updateName” 
函数 方法 触发 在 后 。 

第 二 组 效果 如 图 11.38、 图 11.39、 图 11.40 和 图 11.41 所 示 。 
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口 senchaclasses x 


€ DC | 口 localhost1841/workspace/senchaclasses/ 电 








localhost:1841 显示 


Are u sure toapply name to newName? 


禁止 此 页 再 显示 对 话 框 . 


图 11.38 config 属性 应 用 操作 (5) 
西 


| D senchaClasses x 


< © 口 localhost1841/workspace/senchaclasses/ 印 





localhost:1841 显示 ; 
Are u sure to apply age to 1007 


禁止 此 页 再 显示 对 话 怪 , 


图 11.40 config 属性 应 用 操作 7) 












Eee 盏 -oo x| 


口 :enchaclasses x 


€ € D localhost:1841/workspace/senchaClasses/ 电 Z| 三 











localhost:1841 显示 : 
Are u sure to update name to newName? 


禁止 此 页 再 旺 示 对 活 杠 . 


11.39 config 属性 应 用 操作 (6) 
西 


DD senchaClasses x 


起 © 日 localhost1841/workspace/senchaclasses/ 印 安 三 


localhost:1841 显示 : 


Are u sure to update age to 1007 


禁止 此 页 再 显示 对 笑 在 . 





图 11.41 config 属性 应 用 操作 〈8) 


从 图 11.34、 图 11.39、 图 11.40 和 图 11.41 中 看 到 ,【 代 码 11-14】 中 的 第 14 一 15 行 代码 
“setName” 和 “setAge” 函 数 方法 对 姓名 name 和 年 龄 age 属性 进行 重新 设 定 操 作 后 ， 再 次 触发 
了 【代码 11-13】 中 定义 的 “applyName ”和 “updateName ”函数 方法 ， 同 样 触发 的 顺序 是 
“applyName ”函数 方法 触发 在 前 、“updateName” 函 数 方法 触发 在 后 。 


最 后 显示 如 图 11.42 所 示 的 页 面 效 果 图 。 
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Ed - oo x 
[D senchaclasses x Ss 


€ 2 C | localhost1841/workspace/senchaClasses/ 虽 39 








Welcome to Sencha Touch 2 


You've just generated a new Sencha Touch 2 project 
Project Details: How to Use Classes in Sencha Touch. 





init data: 
getName() is oldName 
getAge() is 99 





set new data 
getName() is newName 
getAge()is 100 


11.42 config 属性 应 用 操作 (9) 


从 图 11.42 中 看 到 ， 首 先 【 代 码 11-14】 中 的 第 12 行 代码 调用 的 “funcConfig” 函 数 方法 显 
示 了 姓名 name 和 年 龄 age 属性 的 初始 值 ， 然 后 第 18 行 代码 调用 的 “funcConfig” 函 数 方法 显示 
了 重新 设 定 姓 名 name 和 年 龄 age 属性 后 的 值 。 

我 们 简单 总 结 一 下 “config” 属 性 的 使 用 方法 : Sencha Touch 框架 为 “config” 属 性 内 置 了 
setter 与 getter 方法 ， 用 于 设 定 和 获取 “config” 属 性 值 。 同 时 ， 还 内 置 了 apply 与 update 回调 方 
法 ， 根 据 官方 文档 说 明 ，apply 方法 在 setter 方法 操作 属性 值 时 被 触发 ，update 方法 在 属性 值 重 新 
设 定 后 被 触发 。 











11.2.2 ”容器 组 件 


在 这 一 小 节 中 ， 我 们 将 介绍 Sencha Touch 框架 容器 组 件 的 概念 。 在 Sencha Touch 框架 中 ， 
我 们 能 看 到 的 绝 大 多 数 可 视 化 类 均 被 定义 为 容器 组 件 。 每 一 种 类 型 的 容器 组 件 均 继 承 自 Ext JS 
框架 的 Ext.Component 类 。 

Sencha Touch 框架 的 容器 组 件 具 有 很 强大 的 特性 ， 一 般 类 似 HTML 控件 所 具有 的 页 面 特性 
( 辟 如 显示 、 隐 藏 、 定 位 、 对 齐 和 禁用 等 )， 容 器 组 件 也 都 能 实现 。 同 时 ，Sencha Touch 框架 的 
容器 组 件 还 具有 HTML 5 规范 下 的 浮动 、 层 县 、 动 画 和 拖 蝶 等 高 级 特性 ， 这 也 是 为 什么 Sencha 
Touch 被 称 为 最 先进 的 前 端 HTML 5 框架 的 原因 之 一 。 

下 面 通 过 一 个 简单 的 应 用 实例 演示 容器 组 件 的 使 用 方法 。 

首先 ， 新 创建 一 个 Sencha Touch APP， 将 项 目 命 名 为 “senchaComp”。 打 开 项 目 根 目录 下 的 
app.js 脚本 文件 ， 对 launch 方法 进行 修改 ， 详 见 【 代 码 11-15】。 


【代码 11-15】 


01 launch: function() { 

02 // Destroy the #appLoadingIndicator element 
03 Ext.fly('appLoadingIndicator') .destroy(); 
04 // Initialize the main view 
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方法 的 内 容 介绍 如 下 : 

在 第 05 行 代码 中 ， 我 们 注销 了 原始 的 'senchaComp.view.Main' 主 视图 类 ， 在 下 面 我 们 添加 了 
新 的 自 定义 主 视图 。 

第 09 一 12 行 代码 定义 了 第 一 个 Ext.Panel 类 ， 并 为 其 增加 了 一 些 CSS 样式 效果 ， 我 们 将 该 
类 作为 主 视图 使 用 。 

第 14 一 33 行 代码 定义 了 第 二 个 Ext.Panel 类 ， 定 义 了 布局 方式 layout 为 水 平方 式 (hbox')， 
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我 们 将 其 作为 子 视图 使 用 。 其 中 ， 第 19 一 32 行 代码 使 用 “items” 属 性 定义 了 两 个 子 panel， 分 
别 定义 了 不 同 的 CSS 样式 风格 。 
另外 ， 读 者 要 留意 第 21 行 与 第 27 行 代 码 关 于 “xtype” 属 性 的 使 用 。 根 据 Sencha Touch 官 
方 文档 的 解释 ， 使 用 “xtype” 属 性 可 以 在 不 定义 完整 类 的 情况 下 很 方便 地 创建 容器 组 件 ， 尤 其 
是 在 定义 子 类 时 非常 有 用 。 
运行 “senchaComp” 应 用 ， 页 面 效果 如 图 11.43 所 示 。 
百 -o x 


D senchaComp 


和 3 CC |D localhost1841/workspace/senchaComp/ 听 误 | 去 





11.43 ”容器 组 件 应 用 效果 图 


从 图 11.43 中 看 到 ,“Main Panel”“Left Panel” 和 “Right Panel” 三 者 间 的 层次 关系 正如 
【代码 11-15】 中 所 定义 的 那样 ， 在 页 面 中 清晰 地 呈现 出 来 了 。 


11.2.3 ”组 件 布局 


在 这 一 小 节 中 ， 我 们 将 介绍 Sencha Touch 框架 组 件 布局 的 概念 。 在 11.2.2 小 节 中 ， 我 们 知 
道 了 什么 是 容器 组 件 ， 本 小 节 将 介绍 如 何 把 这 些 容器 组 件 在 页 面 中 有 效 地 组 合 在 一 起 。 
Sencha Touch 框架 为 组 件 布 局 提供 了 类 似 HTML 控件 的 多 种 属性 支持 ， 下 面 我 们 先 按 照 分 
类 简单 地 介绍 一 下 。 
@ hbox 与 vbox 布局 : 水 平 布局 与 垂直 布局 ， 并 结合 “flex” 属 性 定义 顺序 。 
card 布局 : 层 司 式 布 局 ， 通 过 设 定 item 激活 具体 层 。 
人 it 布局 : 适用 式 布 局 ， 适 用 于 父 容器 的 尺寸 大 小 。 
dock 定位: 定义 容器 组 件 的 上 、 下 、 左 、 右 及 居中 定位 。 
pack 与 align 对 齐 : 定义 容器 组 件 的 对 齐 方式 。 


下 面 我 们 通过 官方 文档 给 出 的 一 个 应 用 实例 来 演示 Sencha Touch 框架 容器 组 件 布局 的 使 用 
方法 。 

首先 ， 新 创建 一 个 Sencha Touch APP， 将 项 目 命名 为 “senchaLayout”。 打 开 项 目 根 目录 下 的 
app:js 脚本 文件 ， 对 launch 方法 进行 如 下 修改 : 
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方法 的 内 容 介绍 如 下 : 

第 05 行 代码 中 ， 我 们 注销 了 原始 的 'senchaComp.view.Main' 主 视图 类 ， 下 面 我 们 添加 了 新 的 
自 定义 主 视图 。 

第 09 一 99 行 代码 定义 了 一 个 ExtContainer 容 器 类 ， 并 返回 名 称 为 “containerHBox” 的 类 实 
例 ， 我 们 将 该 类 作为 主 视图 使 用 。 

第 13 一 17 行 代 码 定义 了 “containerHBox” 容 器 类 的 布局 方式 layout 为 水 平方 式 (hbox'")， 
并 且 定义 了 对 齐 方式 “align” 和 “pack” 的 属性 值 均 为 “start”。 

第 21 一 98 行 代码 使 用 “items” 属 性 为 “containerHBox” 容 器 类 定义 了 一 组 子 组 件 ， 并 分 别 
设 定 了 有 具体 的 布局 方式 。 

其 中 ， 第 22 一 24 行 代码 使 用 “xtype” 属 性 定义 了 一 个 “titlebar”， 相 当 于 一 个 标题 栏 ， 并 设 
定 了 “docked” 属 性 值 为 “top”， 定 位 相当 于 置顶 。 

第 26 一 52 行 代码 使 用 “xtype” 属 性 定义 了 一 个 “toolbar”， 相 当 于 一 个 工具 条 ， 同 样 定位 
也 是 置顶 。 这 其 中 的 第 33 一 51 行 代码 为 该 工具 条 增加 了 一 个 “xtype” 类 型 为 'segmentedbutton' 的 
子 组 件 ， 相 当 于 一 组 功能 按钮 。 注 意 ， 在 第 37 一 39 行 代码 定义 的 回调 函数 中 使 用 setPack0 函 数 
方法 设置 新 的 “pack” 定 位 方式 为 “start”， 第 43 一 45 行 代码 与 第 48 一 50 行 代码 定义 的 回调 函 
数 完成 了 同样 的 功能 。 

第 54~85 行 代码 定义 了 第 二 个 工具 条 “toolbar”， 实 现 的 功能 基本 与 第 26 一 52 行 代码 一 
致 ， 不 同 的 地 方 就 是 使 用 setAlign() 函 数 方法 设置 了 新 的 “align” 定 位 方式 。 

第 87 一 97 行 代码 定义 了 一 组 “button ”按钮 ， 这 组 按钮 将 会 在 页 面 中 通过 setPack0 与 
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setAlign0 函 数 方法 重新 设 定 新 的 定位 方式 。 
运行 “senchaLayout” 应 用 ， 页 面 初始 效果 如 图 11.44 所 示 。 





口 senchalaycut 


口 X 
x 
@G localhost1841/workspace/senchaLayouty 电 安 
HBox Layout 
Pack: 


Start Center End 


Align: Start Center End Stretch 


Button1 Button2 Button3 





图 11.44 容器 组 件 布 局 效果 (1) 


从 图 11.44 中 看 到 ,“HBox Layout”“Pack”“Align” 与 “Button” 之 间 的 层次 关系 正如 【 代 
码 11-16】 中 所 定义 的 那样 ， 在 页 面 中 清晰 地 呈现 出 来 了 。 点 击 “Pack” 与 “Align” 里 面 的 定位 
按钮 ， 测 试 一 下 对 “Button” 按 钮 的 效果 ， 如 图 11.45 与 图 11.46 所 示 。 





To x - OO x 
口 senchalayout x [senchalayout 
所 © DD localhost:1841/workspace/senchaLayout/ 电 窟 | 三 € © D localhost:1841/workspace/senchaLayout/ 甸 三 
HBox Layout HBox Layout 
Pack: Start Center End Pack Start Center End 
Align Start Center End Stretch Align: Start Center End Stretch 
Button1 Button2 Button3 Buton1 Button2 Button3 











图 11.45 容器 组 件 布局 效果 (2) 图 11.46 容器 组 件 布局 效果 (3) 


从 图 11.45 与 图 11.46 可 以 看 到 ， 不 同 的 定位 方式 中 会 产生 不 同 的 效果 。 这 是 





“pack” 定 位 方式 与 “align” 定 位 方式 是 不 同 的 ,“pack” 定 位 方式 是 在 水 平方 向 上 进行 定位 ， 
而 “align” 定 位 方式 是 在 垂直 方向 上 进行 定位 。 


上 面 这 个 应 用 实例 是 “HBox Layout”( 水 平 ) 方式 布局 的 ， 同 样 还 有 一 种 “VBox Layout” 


(垂直 ) 方式 布局 的 ， 两 种 方式 的 实现 原理 是 类 似 的 ， 感 兴趣 的 读者 可 以 参考 本 书 附 带 的 源 代 
人 码 ， 项 目 名 称 为 “senchaLayoutV”。 


11.2.4 事件 


Sencha Touch 框架 设计 了 完整 的 事件 触发 处 理 系 统 ， 是 完全 基于 Ext JS 框架 来 实现 的 。 设 计 
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人 员 可 以 编写 响应 事件 触发 的 相关 代码 来 完成 相应 的 操作 。 
上 面 关于 事件 的 介绍 可 能 比较 抽象 ， 我 们 举 一 个 简单 的 实例 来 解释 一 下 什么 是 事件 。 例 如 ， 
一 个 定义 好 的 容器 组 件 将 要 被 提交 到 屏幕 中 进行 显示 ， 此 时 “painted” 事 件 (由 Sencha Touch 
框架 定义 ) 就 会 被 触发 ， 此 时 我 们 就 可 以 监听 (listeners〉 该 事件 并 编写 相应 的 事件 处 理 代码 。 
下 面 我 们 结合 官方 文档 给 出 的 一 系列 简单 实例 来 演示 Sencha Touch 框架 事件 处 理 的 应 用 方法 。 
首先 ， 新 创建 一 个 Sencha Touch APP， 将 项 目 命名 为 “senchaEvents”。 打 开 项 目 根 目录 下 的 
app.js 脚本 文件 ， 对 launch 方法 进行 如 下 修改 : 


【代码 11-17】 





方法 的 内 容 介绍 如 下 : 

第 11 一 22 行 代码 创建 了 一 个 Ext.Panel' 容 器 组 件 ， 其 将 作为 主 视图 使 用 。 

第 17 一 21 行 代码 定义 了 监听 〈listeners) 事件 处 理 方法 ， 有 具体 将 会 监听 “painted” 事 件 ， 如 
果 该 事件 被 触发 将 会 在 事件 处 理 方法 中 弹出 一 个 消息 警告 框 。 需 要 注意 ， 容 器 组 件 在 屏幕 中 变 为 
可 见 (visible》 时 的 状态 将 会 触发 “painted” 事 件 。 

运行 “senchaEvents” 应 用 ， 页 面 的 初始 效果 如 图 11.47 所 示 。 
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DD senchaEvents x 


€ 3C Blocalhost1841/workspace/senchaEvents/ 则 交 十 














Panel was painted to the scr 


OK 


图 11.47 触发 “painted” 事 件 


从 图 11.47 中 可 以 看 到 ,【 代 码 11-17】 中 第 11 行 代码 创建 的 Panel 组 件 在 屏幕 中 显示 出 来 后 
“painted” 事 件 被 触发 ， 第 19 行 代码 定义 的 消息 警告 框 也 随即 弹出 。 

Sencha Touch 框架 定义 的 “painted” 事 件 虽然 在 应 用 的 生命 周期 中 会 随时 随 刻 被 触发 ， 但 在 
一 般 情况 下 设计 人 员 不 会 针对 该 事件 去 写 处 理 方法 。 下 面 我 们 演示 几 个 比较 常用 事件 的 处 理 


方法 。 
打开 “senchaEvents” 项 目 根 目录 下 的 appijs 脚本 文件 ， 对 launch 方法 进行 如 下 修改 : 
【代码 11-18】 
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21 DE 
2 
方法 的 内 容 介绍 如 下 : 


第 09 一 21 行 代码 在 主 视图 中 添加 了 一 个 按钮 组 件 ， 通 过 定义 “xtype” 属 性 值 为 button' 来 实 
现 。 第 16 一 20 行 代码 定义 了 监听 (listeners) 事件 处 理 方法 ， 将 会 监听 “tap” 事 件 。 如 果 该 事件 
被 触发 就 会 在 事件 处 理 方法 中 弹出 一 个 消息 警告 框 。Sencha Touch 框架 定义 的 “tap” 事 件 类 似 
于 传统 的 点 击 (click) 事件 。 

运行 “senchaEvents” 应 用 ， 点 击 按钮 进行 测试 ， 页 面 的 初始 效果 如 图 11.48 所 示 。 





口 :enchaEvents x 


4 © localhost:184 





You tapped me 


OK 

















图 11.48 触发 “tap” 事件 

从 图 11.48 中 可 以 看 到 ， 点 击 页 面 中 的 按钮 后 ,，“tap” 事 件 被 触发 ,【 代 码 11-18】 中 第 18 行 
代码 定义 的 消息 警告 框 随即 弹出 。 

如 果 需 要 同时 处 理 多 个 事件 ， 就 在 监听 回调 方法 中 同时 处 理 多 个 事件 。 打 开 
“senchaEvents” 项 目 根 目录 下 的 appjs 脚本 文件 ， 对 launch 方法 进行 如 下 修改 : 

【代码 11-19】 


01 launch: function() { 


02 // Destroy the #appLoadingIndicator element 
03 Ext .fly('appLoadingIndicator') .destroy(); 
04 // Initialize the main view 

05 // Ext.Viewport .add (Ext.create('senchaEvents.view.Main')); 
06 Wi 

07 * define Button component 

08 dh 

09 Ext .Viewport.add({ 

10 xtype: 'button', 

NB centered: true, 

本 text: "Click to change width'yv 
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EE, ke 

14 * handle listeners procedure 

15 Ek 

16 listeners: { 

a irh tap: function() { 

18 Var randomWidth = 256 + Math.round (Math.random() * 128) 7 
19 this.setWidth (randomWidth); 

20 ]， 

2 widthchange: function (button，mnewwidth，oldwidth) { 

过 2 Ext.Msg.alert ('Width: ' + oldWidth + ' to ' + newWidth); 
23 

24 . 

25 Ds; 

26 1}, 


方法 的 内 容 介 绍 如 下 : 

第 09 一 215 行 代码 在 主 视图 中 添加 了 一 个 按钮 组 件 ， 通 过 定义 “xtype” 属 性 值 为 'button' 来 
实现 。 

第 16 一 24 行 代码 定义 了 监听 (listeners ) 事件 处 理 方 法 ， 将 会 监听 “tap ”与 
“widthchange” 事 件 。 根 据 Sencha Touch 框架 的 定义 ,“widthchange” 事 件 会 在 组 件 宽度 发 生 改 
变 时 被 触发 。 

第 17 一 20 行 代码 定义 了 “tap” 事 件 的 回调 方法 ， 第 18 行 代码 通过 随机 数 生成 一 个 随机 的 
组 件 宽度 ， 第 19 行 代码 通过 setWifth0 方 法 将 刚刚 随机 生成 的 随机 宽度 设 定 为 组 件 的 新 宽度 。 

第 21 一 23 行 代码 定义 了 “widthchange” 事 件 的 回调 方法 ， 该 回调 方法 包含 3 个 参数 (组件 
实例 、 设 定 的 宽度 以 及 原始 宽度 )。 第 22 行 代码 定义 了 一 个 消息 警告 框 。 

运行 “senchaEvents” 应 用 ， 点 击 按钮 进行 测试 ， 页 面 的 初始 效果 如 图 11.49 所 示 。 点 击 图 
中 的 按钮 ， 此 时 “tap” 事 件 会 被 触发 ， 然 后 【代码 11-19】 中 第 18 一 19 行 代码 被 执行 ， 
“button” 组 件 被 设 定 为 新 的 宽度 ，“widthchange ”事件 被 触发 ， 第 19 行 代码 定义 的 消息 警告 杠 
也 随即 弹出 ， 如 图 11.50 所 示 。 


1 
口 
x 
1 

口 
x 


senchaEvents x D senchaEvens 


€ DC |D localhost1841/workspace/senchaEvents/ 申 立 | 三 € 3 © Dlocalhost1841/workspace/senchaEvents/ 晤 立 | 三 








Width: 260 to 298 


or 








图 11.49 同时 处 理 多 个 事件 (1) 图 11.50 同时 处 理 多 个 事件 (2) 
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11.2 节 我 们 介绍 了 Sencha Touch 框架 的 核心 概念 ， 包 括 类 系统 、 布 局 和 事件 等 内 容 。 本 节 
我 们 将 继续 介绍 Sencha Touch 框架 的 组 件 应 用 ， 包 括 导航 视图 、 旋 灯 视 图 和 表单 等 内 容 。 


11.3.1 导航 视图 


导航 视图 是 Sencha Touch 框架 为 设计 人 员 提 供 的 一 款 全 新 组 件 。 一 个 最 基本 的 导航 视图 要 
包括 一 个 工具 条 及 其 对 应 的 视图 组 件 。Sencha Touch 框架 设计 的 导航 视图 是 通过 push 〈 添 加) 和 
pop〔〈 删 除 ) 这 种 类 似 栈 操作 的 形式 来 实现 的 。 

具体 来 讲 ， 当 用 户 进行 一 个 push 操作 后 ，Sencha Touch 框架 负责 将 一 个 视图 添加 入 栈 并 以 
动画 的 方式 将 一 个 新 的 标题 显示 在 工具 条 中 。 同 时 ，Sencha Touch 框架 还 负责 在 工具 条 中 添加 一 
个 返回 按钮 ， 以 帮助 用 户 pop (返回) 到 前 一 个 视图 。 

Sencha Touch 框架 设计 的 导航 视图 功能 是 十 分 强大 的 。 下 面 通过 一 个 基本 的 导航 视图 应 用 来 
具体 了 解 一 下 如 何 设计 导航 视图 。 

首先 ， 我 们 新 创建 一 个 Sencha Touch APP， 将 项 目 命名 为 “senchaNaviView ”。 打 开 项 目 根 
目录 下 的 appjs 脚本 文件 ， 对 launch 方法 进行 如 下 修改 : 


【代码 11-20】 
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方法 的 内 容 介绍 如 下 : 
第 07 一 136 行 代码 整体 上 定义 了 一 个 导航 视图 类 ， 通 过 第 08 行 代码 定义 “xtype” 属 性 值 为 
mnavigationview' 来 实现 。 
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第 13 一 135 行 代码 使 用 “items” 属 性 定义 了 导航 类 内 部 的 元 素 。 其 中 ， 第 16 行 代码 定义 了 
导航 视图 的 标题 。 第 17 一 21 行 代 码 通 过 “layout” 属 性 定义 了 布局 方式 。 第 22 一 27 行 代码 通过 
“html” 属 性 定义 了 主 视图 界面 中 的 文本 内 容 。 

第 28 一 133 行 代码 使 用 第 二 个 “items” 属 性 定义 了 导航 视图 的 子 视图 元 素 。 第 31 行 代码 通 
过 定义 “xtype” 属 性 值 为 toolbar 来 实现 导航 视图 的 工具 条 。 第 37 行 代码 通过 定义 “xtype” 属 
性 值 为 segmentedbutton 实 现 了 一 组 导航 按钮 。 第 39 一 130 行 代码 使 用 第 三 个 “items” 属 性 实现 
了 3 个 导航 子 视图 。 

注意 ， 第 46、77 和 107 行 代码 分 别 通过 3 个 push 方法 加 入 了 3 个 导航 子 视图 ， 而 在 第 
57、88 和 118 行 代码 中 又 分 别 通过 3 个 pop 方法 删除 了 3 个 导航 子 视图 。 这 就 是 Sencha Touch 
框架 导航 视图 中 通过 push 添加) 与 ppp《〈 删 除 ) 方法 实现 导航 的 方式 。 

运行 “senchaNaviView” 应 用 ， 页 面 效果 如 图 11.51 所 示 。 


[DD senchoNoviView 


oO x 
« 3 C |B localhost1841/workspace/senchaNaviView, 电 窑 | 要 | 


Navigation View 


Navigation: Push First View Push Second Viow = Push Third Vi 





This ls the main view. 
You can click the 'Push first/second/third view! button back to navi view. 
Nowtry 记 





图 11.51 导航 视图 应 用 (1) 


从 图 11.51 中 可 以 看 到 ,“Navigation” 导 航 视 图 工具 条 及 3 个 导航 按钮 正如 【代码 11-20】 
中 所 定义 的 那样 ， 在 页 面 中 清晰 地 呈现 出 来 了 ， 在 主 界面 中 还 通过 文字 向 用 户 提示 了 如 何 进行 导 
航 操作 。 

点 击 “Push Second View” 按 钮 ， 导 航 到 第 二 个 视图 界面 的 效果 如 图 11.52 所 示 。 


百 - co x | 
DeenadView x 
和 3 © [Dlocalhost:1841/workspace/senchaNaviView/ 吧 容 本 
Bock Second View | 
Pop this view! | | 





This is the second view. 
You can click the 'Pop this view!' button back to main navi view. 
Now try tt 





11.52 ”导航 视图 应 用 (2) 


从 图 11.52 中 可 以 看 到 ， 该 页 面 效果 正 是 【代码 11-20】 中 第 71 一 99 行 代码 所 定义 的 。 如 果 
我 们 点 击 “Pop this view!” 按 钮 或 者 点 击 “Back” 按 钮 ， 页 面 会 返回 图 11.51 所 示 的 视图 中 。 另 
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外 ， 还 可 以 依次 尝试 点 击 “Push First View” 和 “Push Third View” 按 钮 ， 测 试 导 航 视 图 的 操 
作 。 


11.3.2” 旋 灯 视 图 


旋 灯 (Carousels) 视图 是 Sencha Touch 框架 为 设计 人 员 提供 的 又 一 款 全 新 组 件 ， 有 点 类 似 
传统 的 选项 卡 〈Tab) 视图 ， 但 二 者 又 有 明显 的 不 同 。 旋 灯 视 图 在 界面 中 一 次 仅 显 示 一 个 视图 ， 
但 用 户 可 以 通过 手势 操作 来 浏览 前 一 个 或 后 一 个 视图 ， 该 操作 目前 是 智能 手机 中 是 最 基本 的 功能 
= 

具体 来 讲 ， 设 计 人 员 可 以 将 旋 灯 视图 当 作 一 个 唯一 的 活动 界面 ， 但 可 以 通过 手势 操作 来 自由 
切换 到 前 一 个 或 后 一 个 活动 界面 。 同 时 ， 旋 灯 视 图 的 界面 中 有 一 个 指标 点 表示 具体 界面 的 数量 ， 
用 户 操作 时 可 以 清晰 地 看 到 当前 处 在 哪 一 个 活动 界面 中 。 

Sencha Touch 框架 的 旋 灯 视图 功能 就 是 专 为 智能 手机 界面 而 设计 的 。 下 面 通过 一 个 基础 的 旋 
灯 视 图 应 用 来 具体 了 解 一 下 如 何 设计 旋 灯 视图 。 

首先 ， 我 们 新 创建 一 个 Sencha Touch APP， 将 项 目 命名 为 “senchaCarousels”。 打 开 项 目 根 目 
录 下 的 appjs 脚本 文件 ， 对 launch 方法 进行 如 下 修改 : 


【代码 11-21】 
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方法 的 内 容 介绍 如 下 : 


第 09 一 73 行 代码 整体 上 定义 了 一 个 旋 灯 视图 类 ， 具 体 是 通过 'Ext.Carousel' 类 来 实现 的 。 

第 11 一 72 行 代码 使 用 “items” 属 性 定义 了 旋 灯 视图 内 部 的 元 素 ， 一 共 是 3 个 列表 元 素 。 其 
中 ， 第 13、33 和 53 行 代码 通过 定义 “xtype” 属 性 值 为 list 来 实现 列表 视图 。 

第 19 一 29、39 一 49 和 59 一 59 行 代码 分 别 使 用 3 个 “store” 属 性 存储 了 “姓名 ”“ 性 别 ” 和 
“年 龄 ”3 组 数据 ， 并 通过 第 30、50 和 70 行 代 码 定义 的 “itemTp1” 属 性 导入 到 列表 视图 中 。 

运行 “senchaCarousels” 应 用 ， 旋 灯 视 图 的 页 面 效果 如 图 11.53 所 示 。 
百 口 器 


于 ”| 
€ 3 © |D localhost1841/workspace/senchacarousels/ 曙 安 至 


DD senchaCarovzels x\ 





Rob 
Ed 
Jamie 
Tommy 
Abe 











11.53” 旋 灯 视 图 效果 (1) 


从 图 11.53 中 可 以 看 到 ， 第 12 一 31 行 代码 定义 的 列表 视图 在 页 面 中 完全 呈现 出 来 了 。 我 们 
注意 到 页 面 底部 有 个 指标 点 ， 显 示 数 量 为 3 个 ， 这 和 智能 手机 界面 是 完全 一 致 的 。 点 击 这 个 指标 
点 ， 旋 灯 视 图 界面 的 效果 如 图 11.54 和 图 11.55 所 示 。 
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/ D senchaCarousels xx 
€ 3 © Dlocalhost1841/workspace/senchaCarousels/ 电 容 | 三 


Sencha Touch Carousels 


18 
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图 11.54 旋 灯 视图 效果 (2) 图 11.55 旋 灯 视图 效果 (3》 














11.3.3 ”表单 


表单 对 于 大 多 数 读者 来 讲 是 最 熟悉 不 过 的 页 面 组 件 了 ， 相 信 大 家 从 刚刚 接触 HTML 语言 开 
始 就 接触 到 表单 了 。Sencha Touch 框架 同样 为 设计 人 员 提 供 完整 的 表单 设计 功能 ， 基 本 上 是 基于 
ExtJS 框架 来 实现 的 。 

Sencha Touch 框架 的 表单 实现 了 全 部 的 卷 标 (Label )、 文 本 框 〈( TextField )、 按 钮 
(Button)、 列 表 (List)、 菜 单 《Menu)、 工 具 条 〈Toolbar) 和 数据 视图 (DataView) 等 这 些 全 
部 页 面 组 件 元 素 。 同 时 ， 还 细 化 了 Email 地 址 、IP 地 址 和 密码 框 等 这 些 功能 组 件 ， 极 大 地 方便 
了 设计 人 员 的 使 用 。 另 外 ，Sencha Touch 框架 内 部 还 实现 了 对 表单 组 件 内 容 的 统一 操作 ， 例 如 设 
置 、 获 取 和 清除 表单 数据 的 函数 方法 。 

Sencha Touch 框架 的 表单 也 是 专 为 智能 手机 界面 而 设计 的 。 下 面 通过 一 个 简单 的 表单 应 用 来 
具体 了 解 一 下 如 何 实现 Sencha Touch APP 的 表单 功能 。 

首先 ， 我 们 新 创建 一 个 Sencha Touch APP， 将 项 目 命名 为 “senchaForms”。 打 开 项 目 根 目录 
下 的 appjs 脚本 文件 ， 对 launch 方法 进行 如 下 修改 : 


【代码 11-22】 
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方法 的 内 容 介绍 如 下 : 

第 09 一 40 行 代码 整体 上 定义 了 一 个 表单 类 ， 有 具体 是 通过 'Extform.Panel 类 来 实现 的 。 第 16 
行 代码 通过 定义 “xtype” 属 性 值 为 fieldset 定 义 了 第 17 一 38 行 代码 的 一 组 表单 域 。 其 中 ， 第 
23 一 27 行 代码 通过 定义 “xtype” 属 性 值 为 textfield' 定 义 了 表单 域 中 的 “姓名 ”输入 框 。 第 28 一 
32 行 代码 通过 定义 “xtype” 属 性 值 为 'emailfield' 定 义 了 表单 域 中 的 “邮件 地 址 ”输入 框 。 第 
33 一 37 行 代 码 通过 定义 “xtype” 属 性 值 为 passwordfield' 定 义 了 表单 域 中 的 “密码 ”输入 框 。 

第 44~71 行 代码 通过 add() 方 法 为 上 面 定义 的 表单 组 件 增加 了 一 个 工具 条 组 件 ， 其 中 包括 3 
个 功能 按钮 ， 分 别 实现 了 “设置 ”表单 域 数据 、“ 获 取 ” 表 单 域 数据 和 “ 重 置 ”表单 域 数据 操 
作 。 其 中 ,“ 设 置 ”表单 域 数 据 操作 是 通过 第 52 一 56 行 代码 的 setValues0 函 数 方法 实现 的 ,“ 获 
取 ” 表 单 域 数据 操作 是 通过 第 62 行 代 码 的 getvalues0 函 数 方法 实现 的 ,“ 重 置 ” 表 单 域 数 据 操作 
是 通过 第 68 行 代 码 的 reset(O) 函 数 方法 实现 的 。 

运行 “senchaForms” 应 用 ， 表 单 页 面 效果 如 图 11.56 所 示 。 
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- oo x 
D senchaForms 


€ © 日 ocalhost1841/workspace/senchaForms/ 申 立 三 


Sencha Touch Forms 
User Infomation 
Name 


Email 


Password 


Sot Dat = GotDats 。 Clear Data 


图 11.56 表单 效果 


从 图 11.56 中 可 以 看 到 ,【 代 码 11-22】 中 设计 的 表单 域 和 工具 条 均 在 页 面 表单 中 展现 出 来 
了 。 点 击 工 具 条 中 的 “Set Data” 按 钮 (设置 表单 数据 )， 表 单 效果 如 图 11.57 所 示 。 然 后 点 击 工 
具 条 中 的 “Get Data” 按 钮 (获取 表单 数据 )， 表 单 效果 如 图 11.58 所 示 。 点 击 工 具 条 中 的 “Clear 
Data” 按 钮 ( 重 置 表单 数据 )， 表 单 会 恢复 到 图 11.57 所 示 的 状态 。 





o x 
DD) sonchaForms 
Le © | D localhost:1841/work vi 


Sencha Touch Forms 
User Infomation 
Name King 


Emall king@sencha com 








图 11.57 设置 表单 域 数据 图 11.58 ”获取 表单 域 数据 


11 .4 本章 小 结 


本 章 我 们 向 读者 介绍 了 Sencha Touch 框架 的 相关 内 容 ， 包 括 如 何 搭建 Sencha Touch 框架 
发 平台 、 使 用 Sencha Touch 框架 开发 移动 应 用 的 步骤 方法 ， 希 望 这 些 内 容 能 够 对 读者 进一步 学 
习 Sencha Touch 框架 有 所 帮助 。 最 后 通过 一 系列 Sencha Touch APP 项 目 介 绍 了 Sencha Touch 框 
架 的 常用 组 件 及 其 使 用 方法 ， 包 括 导航 视图 、 旋 灯 视 图 和 表单 等 内 容 。 
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第 12 章 


jQuery Mobile 框 架 实 战 
一 一 移动 便 答 APP 





本 章 介 绍 一 个 基于 jQuery Mobile 框架 实现 的 移动 应 用 一 一 移动 便签 APP。 在 第 10 章 中 , 我 
们 介绍 了 关于 jQuery Mobile 框架 的 基本 内 容 ， 读 者 对 于 如 何 使 用 jQuery Mobile 框架 有 了 一 定 的 
基本 了 解 。 本 章 我 们 通过 实战 开发 进一步 掌握 如 何 使 用 jQuery Mobile 框架 开发 移动 应 用 的 
方法 。 


项 目 介绍 


移动 便签 APP 在 移动 应 用 中 是 功能 最 基础 的 一 类 ， 一 般 移 动 终端 均 会 内 置 这 类 应 用 提供 给 
用 户 使 用 ， 可 以 帮助 用 户 记录 日 常 重 ， 是 不 太 起 眼 却 很 实用 的 用 。 

般 来 讲 ， 移 动 便签 APP 包括 内 容 浏览 、 新 增 、 编 辑 、 删 除 、 全 部 清除 和 用 户 权限 管理 等 
模块 。 本 章 开发 的 移动 便签 APP 应 用 在 前 端 基于 jQuery Mobile 框架 实现 ， 后 端 储存 通过 HTML 
5 Web Storage 实现 。 

移动 便签 APP 功能 模块 逻辑 关系 如 图 12.1 所 示 。 


(内 容 浏览 ) 















| | | | 登录 
新 增 内 容 | | 编辑 内 容 | | 删除 内 容 | | 清除 内 容 (用 户 权限 ) 
数据 库 数据 
(HTML 5 Web Storage) (Web SQL) 














图 12.1 移动 便签 APP 功能 模块 图 
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1 2 .2 项 目 功能 模块 


本 节 我 们 开始 介绍 移动 便签 APP 各 个 功能 模块 的 实现 过 程 。 移 动 便签 APP 相关 源码 可 以 参 
考 本 书 源码 目录 中 的 jqmNotes 项 目 。 
12.2.1 主页 


首先 ， 我 们 看 一 下 移动 便签 APP 项 目 主页 的 HTML 代码 (对 应 源 代码 jqmNotes 项 目 中 的 
index.html 文件 ): 


【代码 12-1】 
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关于 【代码 12-1】 中 HTML 代码 的 具体 分 析 如 下 : 

第 03 一 15 行 代码 定义 了 页 面 的 头 部 〈<head>)， 其 中 第 05 一 13 行 代码 定义 了 一 个 头 部 弹出 
菜单 。 

第 16~21 行 代码 定 义 了 页 面 的 主体 部 分 ， 其 中 第 17 一 20 行 代码 中 使 用 <ul> 标 签 元 素 通过 
“data-role="listview" ”属性 定义 了 一 个 列表 视图 。 同 时 ， 该 列表 视图 静态 下 为 空 ， 具 体内 容 是 
通过 脚本 代码 动态 创建 的 。 

第 22 一 29 行 代码 定义 了 该 页 面容 器 的 底部 ， 其 中 第 25 行 代 码 通过 使 用 <a> 标 签 元 素 链接 到 
了 项 目 说 明 页 面 。 

然后 ， 我 们 看 一 下 动态 创建 列表 视图 中 内 容 的 JS 代码 (对 应 源 代码 jqmNotes 项 目 中 的 
index.html 文件 ): 


【代码 12-2】 





关于 【代码 12-2】 中 HTML 代码 的 具体 分 析 如 下 : 

第 04 和 05 行 代码 使 用 localStorage 读 取 存储 数据 。 关 于 localStorage 存储 的 使 用 方法 ， 可 参 
阅 HTML 5 Web Storage 的 相关 内 容 。 

第 06 行 代码 对 JSON 数据 进行 解析 。 
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第 07 一 09 行 代码 读 取 JSON 数据 内 容 ， 并 创建 list 列表 项 变量 。 

第 10 行 代码 使 用 listview.append(lis) 方 法 添加 到 【代码 12-1】 中 第 18 一 19 行 代码 定义 的 
<ul> 标 签 元 素 内 ， 实 现 动态 创建 列表 视图 的 功能 。 

测试 项 目的 index.html 主页 页 面 ， 效 果 如 图 12.2 所 示 。 


5 x 
/ JQM Notes| 信 : x 

€ 3 CC Dlocalhost:63342M 曙 六 三 
[a JQ Notes | 便 符 a 

















jquerynobile 
jguery Mobile is s touchrfriody fs OO 
2016-08-21 21:45:55 





122 项 目 主页 运行 效果 


从 图 12.2 中 可 以 看 到 ， 项 目 主页 的 内 容 全 部 显示 出 来 了 ， 里 面包 含 了 一 条 预定 义 的 便 
得 内 容 。 


12.2.2 ”便签 内 容 浏览 页 面 


我 们 看 一 下 便签 内 容 浏览 页 面 的 HTML 代码 对 应 源 代码 jqmNotes 项 目 中 的 shownote.html 
页 面 文件 ): 


【代码 12-3】 
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关于 【代码 12-3】 中 HTML 代码 的 具体 分 析 如 下 : 

第 05 行 代码 定义 了 一 个 <input> 输 入 框 ， 用 于 显示 标题 。 

第 07 行 代码 定义 了 一 个 <textarea> 文 本 域 ， 用 于 显示 内 容 。 

第 09 行 代码 定义 了 一 个 <input> 输 入 框 ， 用 于 显示 创建 时 间 。 

同时 ， 我 们 注意 到 第 05、07 和 09 行 代码 定义 的 标签 均 为 只 读 或 禁用 状态 ， 表 明 标签 的 内 容 

是 无 法 修改 的 。 

下 面 我 们 看 一 下 为 【代码 12-1】 中 第 05、07 和 09 行 代码 定义 的 标签 元 素 传递 值 的 JS 代码 

(对 应 源 代码 jqmNotes 项 目 中 的 shownote.html 文件 ): 


【代码 12-4】 





关于 【代码 12-4】 中 JS 代码 的 具体 分 析 如 下 : 

第 01 行 代码 使 用 getUrlParam0 函 数 方法 获取 了 由 index.html 页 面 传递 来 url 中 的 “tile” 参 
数值 。 

第 03 一 13 行 代码 使 用 for 循环 依次 读 取 localStorage 存储 中 的 数据 ， 并 通过 与 “title” 参 数 
值 比较 判断 匹配 的 一 项 数据 。 

第 08 行 代码 将 JSON 格式 数据 进行 解析 ， 并 在 第 09 和 10 行 代码 中 将 数据 传递 给 对 应 的 页 
面 元 素 进行 显示 。 

点 击 图 12.2 中 列表 视图 中 的 一 项 内 容 ， 跳 转 到 shownote.html 页 面 进行 测试 ， 页 面 效 果 如 图 
12.3 所 示 。 
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12.3 ” 便 笑 内 容 浏 览 效果 


12.2.3 登录 页 面 


下 面 我 们 看 一 下 登录 页 面 的 HTML 代码 (对 应 源 代码 jqmNotes 项 目 中 的 login.html 页 面 文 
和 件 六 


【代码 12-5】 





关于 【代码 12-5】 中 HTML 代码 的 具体 分 析 如 下 : 

第 03 行 代码 定义 了 一 个 <input> 输 入 框 ， 用 于 输入 用 户 名 。 

第 05 行 代码 定义 了 另 一 个 <inpu 忆 输入 框 ， 用 于 输入 密码 。 

第 11 行 代码 定义 了 一 个 <a> 标 签 元 素 ， 用 于 执行 登录 操作 。 

下 面 我 们 看 一 下 执行 登录 操作 的 JS 代码 (对 应 源 代码 jqmNotes 项 目 中 的 login.html 文件 ): 


TI 


【代码 12-6】 


关于 【代码 12-6】 中 JS 代码 的 具体 分 析 如 下 : 
第 01 一 09 行 代码 用 于 判断 用 户 信息 ， 并 执行 登录 操作 。 
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第 10~36 行 代码 定义 了 一 个 用 于 判断 用 户 名 和 密码 合法 性 的 函数 方法 checkLogin()， 通 过 
Web SQL Database 数据 库存 取 用 户 信息 。 

点 击 图 12.2 中 右上 角 的 登录 图 标 按钮 ， 跳 转 到 login.html 页 面 进行 登录 测试 ， 页 面 效 果 如 图 
12.4 所 示 。 





x 
/ JQM Notes -Login x WN 
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© JON Notes - Login [2) 





12.4 ”登录 页 面 效果 


在 图 12.4 中 的 输入 框 中 分 别 输 入 用 户 名 和 密码 ， 点 击 页 面 底部 的 “登录 | Login” 按 钮 ， 验 
证 成 功 后 就 会 跳 转 到 main.html 页 面 ， 该 页 面 与 shownote.html 页 面 内 容 基 本 相同 ， 但 main.html 
页 面具 有 用 户 权限 ， 可 以 执行 高 级 操作 功能 。 


12.2.4 ”便签 内 容 浏览 页 面 〈 用 户 权 限 ) 


下 面 我 们 看 一 下 具有 用 户 权限 便签 内 容 浏 览 页 面 的 HTML 代码 (对 应 源 代码 jqmNotes 项 目 
中 的 main.html 页 面 文 件 ): 


【代码 12-7】 
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关于 【代码 12-7】 中 HTML 代码 的 具体 分 析 如 下 : 

第 06 一 12 行 代码 定义 了 一 组 功能 按钮 ， 用 于 执行 相关 操作 。 
第 31 行 代码 定义 了 一 个 <a> 标 签 元 素 ， 用 于 新 建 便签 内 容 。 
下 面 我 们 看 一 下 main.html 页 面 ， 效 果 如 图 12.5 所 示 。 
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12.5 便签 内 容 浏览 〈 用 户 权限 ) 效果 
从 图 12.5 中 可 以 看 到 ， 页 面 底部 增加 了 “新 建 | New” 按 钮 ， 页 面 右 上 角 显 示 出 了 登录 用 
户 的 用 户 名 。 


12.2.5 ”新建 便签 内 容 


新 建 便 签 内 容 的 HTML 代码 〈 对 应 源 代 码 jqmNotes 项 目 中 的 new.html 页 面 文件 ): 
【代码 12-8】 
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第 20 行 代码 定义 了 一 个 <a> 标 签 元 素 ， 用 于 执行 新 建 便签 内 容 操作 。 
执行 新 建 便签 内 容 功 能 的 JS 代码 (对 应 源 代码 jqmNotes 项 目 中 的 new.html 文件 ): 


【代码 12-9】 





关于 【代码 12-9】 中 JS 代码 的 具体 分 析 如 下 : 

第 09 行 代码 使 用 JSON.stringify(0) 函 数 方法 序列 化 JSON 格式 数据 。 

第 10 行 代码 使 用 localStorage 存储 数据 。 

点 击 图 12.5 中 的 “新 建 | New” 按 钮 ， 跳 转 到 new.html 页 面 进行 测试 ， 效 果 如 图 12.6 
所 示 。 
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© Ja Notes - New © 
Title: 
jquery 


Content: 





| jQuery Jobile is a touch-optimized 
| HDL5 UI framework designed to 
make responsive web sites and apps 
that are accessible on all 
smartphone, tablet and desktop 
devices. 








图 12.6 新 建 便签 内 容 页 面 效 果 


在 图 12.6 中 输入 一 些 数据 信息 ， 然 后 点 击 页 面 底部 的 “保存 | Save” 按 钮 进行 存储 操作 ， 
页 面 则 跳 转 回 main.html 页 面 ， 如 图 12.7 所 示 。 





= 口 x 
JQM Notes |f x \ 


€ 3 CDIlocalhost63342/ 外 安 三 
合 Ju Notes | 便 OO anin 





Q Search 


jquery 
jouery Mobile is a touckroptinized "OO 
2016-08-22 00:08:01 


jquerynobile 


jguery Mobile is sa touckrfriondly fr 从 
2016-08-21 21:45:55 








EEC | 
图 12.7 新 建 便 竹内 容 后 页 面 浏览 效果 


从 图 12.7 中 可 以 看 到 ， 刚 刚 新 建 的 便签 内 容 成 功 存储 入 HTML 5 Web Storage 数据 中 。 
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12.2.6 ”编辑 便签 内 容 


在 图 12.7 中 点 击 列表 视图 中 的 一 项 内 容 则 会 进入 编辑 页 面 ， 如 图 12.8 所 示 。 
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jQuery Jobile is a touch-cptimized 
HIMLS UT franework designed to make 
responsive web sites and apps that 
ars accessible on all smartphone, 
tablet and desktop devices. 


Created date: 





| Delete 。 取消 1 Cancel 


图 12.8 ”编辑 便 竹内 容 页 面 效 果 


在 图 12.8 中 修改 “Content” 中 的 内 容 ， 并 点 击 页 面 底部 的 “保存 | Save” 按 钮 ， 页 面 效 果 
如 图 12.9 所 示 。 
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= 
图 12.9 编辑 便 竹 内容 后 页 面 浏 览 效 果 


12.2.7 “删除 便 敌 内 容 


在 图 12.8 中 ， 页 面 底部 新 出 现 了 一 个 “删除 | Delete” 按 钮 ， 用 于 执行 删除 列表 项 的 操作 。 


下 面 我 们 看 一 下 执行 删除 便签 内 容 功 能 的 JS 代码 (对 应 源 代码 jqmNotes 项 目 中 的 edithtml 文 
性 关 
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【代码 12-10】 





关于 【代码 12-10】 中 JS 代码 的 具体 分 析 如 下 : 

第 02 行 代码 使 用 localStorage 的 removeltem0 方 法 执行 删除 列表 项 的 操作 。 

第 03 行 代码 执行 跳 转 到 main.html 页 面 的 操作 。 

点 击 图 12.8 中 的 “删除 | Delete” 按 钮 ， 跳 转 到 main.html 页 面 的 效果 如 图 12.10 所 示 。 
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12.10 ”删除 便签 内 容 后 页 面 浏览 效果 


12.2.8 ”清空 便 竹 内容 
执行 清空 便签 内 容 功能 的 JS 代码 对 应 源 代码 jqmNotes 项 目 中 的 main html 文件 ); 
【代码 12-11】 





关于 【代码 12-11】 中 JS 代码 的 具体 分 析 如 下 : 

第 02 行 代码 使 用 localStorage 的 clear() 方 法 执行 清除 全 部 列表 项 的 操作 。 
第 03 行 代码 执行 重新 加 载 main.html 页 面 的 操作 。 

点 击 图 12.10 中 左上 角 的 图 标 按钮 ， 页 面 的 效果 如 图 12.11 所 示 。 
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图 12.11 右上 角 图 标 按钮 的 命令 项 
继续 点 击 图 12.11 中 弹出 菜单 中 的 “Clear” 按 钮 执行 清除 内 容 的 操作 ， 页 面 效果 如 图 12.12 


所 示 。 
百 二 各 x 


OM No | x 
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12.12 清空 便签 内 容 后 页 面 浏览 效果 


12.3 本 章 4 结 


本 章 我 们 实战 开发 一 个 基于 jQuery Mobile 框架 的 应 用 一 一 移动 便签 APP， 和 希望 这 些 内 容 
能 够 对 读者 进一步 学 习 jQuery Mobile 框架 有 所 帮助 。 
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第 13 章 
Sencha Touch 框 架 实 战 
通 训 示 APP 


在 第 11 章 中 ， 我 们 介绍 了 关于 Sencha Touch 框架 的 基本 内 容 ， 对 于 如 何 使 用 Sencha Touch 
框架 有 了 一 定 的 基本 了 解 。 本 章 我 们 实战 开发 一 个 基于 Sencha Touch 框架 的 联系 人 APP， 以 便 
进一步 掌握 使 用 Sencha Touch 框架 开发 移动 应 用 的 方法 。 





项 目 介绍 


通讯 录 APP 在 移动 应 用 中 同样 也 是 功能 最 基础 的 一 类 ， 一 般 移 动 终 
供给 用 户 使 用 ， 可 以 方便 用 户 查 找 联 系 人 ， 是 非常 实用 的 一 类 工具 。 本 章 开发 的 通讯 录 APP 应 
用 ， 前 端 界 面 完 全 基于 Sencha Touch 框架 实现 ， 后 端 数据 存储 则 通过 JSON 文件 实现 。 

通讯 录 APP 的 项 目 结构 如 图 13.1 所 示 。 


controller 











帅 


form 
model 
profile 
store 
view 

吕 appjs 

入 appjson 

吐 bootstrapjs 

Wm bootstrapjson 

wh build.xml 

ji contactsjson 


目 index.html 


图 13.1 通讯 录 APP 项 目 结构 

















| 第 13 章 ，Sencha Touch 框架 实战 一 一 通讯 录 APP 





1 3 纪 .2 项 目 功能 模块 


13.2.1 app.js 主 入 口 文件 
通讯 录 APP 项 目的 主 入 口 文件 代码 (对 应 源 代码 senchaContacts 项 目 中 的 appjs 文件 ): 
【代码 13-1】 
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关于 【代码 13-1】 中 代码 的 具体 分 析 如 下 : 
第 06 一 17 行 代码 定义 了 MVC 框架 的 模型 、 视 图 和 控制 器 对 应 的 类 名 。 
第 21 一 23 行 代码 将 senchaContacts.viewMain' 主 视图 类 加 入 视图 窗口 。 


13.2.2 ”Model 模型 


Model 模型 类 的 定义 (对 应 源 代码 senchaContacts 项 目 中 的 appimodel\ContactsModeljs 文 
件 ) 如 下 : 


【代码 13-2】 





第 03 一 16 行 代码 定义 了 Model 模型 (senchaContacts.model.ContactsModel) 的 一 组 属性 。 


13.2.3 ”Store 存储 
Store 存储 类 的 定义 (对 应 源 代码 senchaContacts 项 目 中 的 app\store\ContactsStorejs 文件 ) 如 下 : 
【代码 13-3】 
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第 12 一 15 行 代码 通过 ajax 方式 调用 读 取 了 本 地 “contactsjson” 文 件 ， 用 于 加 载 通讯 录 信 息 。 


13.2.4 ”View 主 视图 
View 主 视 图 类 的 定义 〈 对 应 源 代码 senchaContacts 项 目 中 的 app\view\Mainjs 文件 ) 如 下 : 
【代码 13-4】 





构建 移动 网 站 与 APP: HTML 5 移动 开发 入 门 与 实战 局 叶 让 | 





【 第 13 章 ”Sencha Touch 框架 实战 一 一 通讯 录 APP 








关于 【代码 134】 中 代码 的 具体 分 析 如 下 : 


第 03 行 代码 定义 了 “xtype: Imainview'” 类 型 。 

第 04 一 08 行 代码 通过 “requires” 关 键 字 引用 了 主 视 图 类 需要 用 到 的 类 。 

第 09 一 66 行 代码 通过 “config” 关 键 字 定义 了 主 视 图 类 的 页 面 结构 。 其 中 ， 第 63 一 65 行 代 
码 通过 “xtype: 'contacts'” 引 用 了 contacts 类 型 。 


13.2.5 “Contacts 视图 类 
Contacts 视图 类 的 定义 〈 对 应 源 代码 senchaContacts 项 目 中 的 app\viewAContactsjs 文件 ) 如 下 : 
【代码 13-5】 





关于 【代码 13-5】 中 代码 的 具体 分 析 如 下 : 
第 03 行 代 码 定 义 了 “xtype: 'contacts'” 类 型 。 
第 04 一 15 行 代码 通过 “config” 关 键 字 定义 了 Contacts 视图 类 的 页 面 结构 。 其 中 ， 第 09 一 
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14 行 代码 通过 “itemTpl” 模 板 定义 了 具体 的 通讯 录 内 容 。 


13.2.6 ”Controller 控制 器 


Controller 控制 器 类 的 定义 (对 应 源 代码 senchaContacts 项 目 中 的 app\controller\Application.js 
文件 ) 如 下 : 


【代码 13-6】 





攻 第 13 章 ”Sencha Touch 框架 实战 一 通讯 录 APP 
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关于 【代码 13-6】 中 代码 的 具体 分 析 如 下 : 

第 03 一 30 行 代码 通过 “config” 关 键 字 定义 了 控制 器 所 需要 控制 的 控件 与 事件 的 映射 关 
系 。 其中， 第 04 一 11 行 代码 通过 “refs” 关 键 字 定 义 了 视图 、 控 件 对 应 的 别名 ， 第 12 一 30 行 代 
码 通过 “control” 关 键 字 定义 了 这 些 别 名 对 应 的 事件 方法 。 

第 31 一 104 行 代码 为 上 面 若干 事件 方法 的 具体 实现 过 程 。 


本 .了 测试 运行 项 目 


经 过 前 面 的 介绍 ， 大 家 对 通讯 录 APP 项 目的 代码 结构 与 实现 功能 有 了 一 定 的 了 解 ， 下 面 我 
们 运行 测试 一 下 该 项 目 。 通 讯 录 APP 运行 后 的 初始 页 面 效 果 如 图 13.2 所 示 。 

我 们 随机 选取 一 个 通讯 录 名 单 继续 点 击 一 下 ， 进 入 该 联系 人 具体 信息 页 面 ， 效 果 如 图 13.3 
所 示 。 
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13.2 通讯 录 APP 初始 页 面 效 果 图 13.3 通讯 录 APP 联系 人 页 面 效果 


然后 ， 我 们 继续 点 击 右 上 角 的 “Edit” 按 钮 ， 进 入 编辑 该 联系 人 具体 信息 的 页 面 ， 效 果 如 图 
13.4 所 示 。 
尝试 修改 一 些 联系 人 的 信息 ， 页 面 效 果 如 图 13.5 所 示 。 





Se ee 

站 localhost1841/ 加 蚂 CC » 三 localhost1841A 辕 照 CC » 三 
pack Edit Beck Edit Sove 
Information Information 
First Name Henderson First Name Henderson 
Last Name Auer Last Name Auer 
Tie Customer Configuratl Te CTO 
Contact Information Contact Information 
Telephone +1(650) 555 1212 Telephone 。 +1(550) 555 1212 
Address Address 











图 13.4 通讯 录 APP 联系 人 编辑 页 面 效果 图 13.5 通讯 录 APP 修改 联系 人 信息 页 面 效 果 
点 击 右 上 角 的 “Save” 按 钮 ， 保 存 修改 好 的 联系 人 信息 ， 页 面 效 果 如 图 13.6 所 示 。 
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图 13.6 ”保存 通讯 录 APP 联系 人 信息 
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从 图 13.6 中 可 以 看 到 ， 联 系 人 的 “Title” 项 信息 已 经 被 成 功 修改 为 “CTO ”。Sencha Touch 
框架 虽然 入 门 有 一 定 难度 ， 但 是 实际 应 用 功能 确实 很 强大 。 


1 本 .和 本章 小 结 


本 章 我 们 实战 开发 一 个 基于 Sencha Touch 框架 的 移动 应 用 一 一 通讯 录 APP， 和 希望 这 些 内 
容 能 够 对 读者 进一步 学 习 Sencha Touch 框架 有 所 帮助 。 
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